웹사이트 검색

React로 탭 구성 요소를 빌드하는 방법

소개

웹 앱을 구축한 적이 있다면 한 지점 또는 다른 지점에서 탭 문서 인터페이스를 구축했을 가능성이 큽니다. 탭을 사용하면 복잡한 인터페이스를 사용자가 빠르게 전환할 수 있는 관리 가능한 하위 섹션으로 나눌 수 있습니다. 탭은 일반적인 UI 구성 요소이며 구현 방법을 이해하는 데 중요합니다.

이 문서에서는 단독으로 또는 기존 구성 요소와 함께 사용할 수 있는 재사용 가능한 탭 컨테이너 구성 요소를 만드는 방법을 배웁니다.

전제 조건

이 가이드를 시작하기 전에 다음이 필요합니다.

  • Ubuntu 18.04에 Node.js를 설치하는 방법을 실행하는 개발 환경이 필요합니다.
  • 이 자습서에서는 Create React App을 사용하여 React 프로젝트를 설정하는 방법으로 앱을 만듭니다.
  • 또한 Mozilla 개발자 네트워크에서 찾을 수 있는 JavaScript에 대한 기본 지식이 필요합니다.

이 튜토리얼은 Node.js 버전 10.20.1 및 npm 버전 6.14.4에서 테스트되었습니다.

1단계 - 빈 프로젝트 만들기

이 단계에서는 Create React App을 사용하여 새 프로젝트를 만듭니다. 그런 다음 프로젝트를 부트스트랩할 때 설치된 샘플 프로젝트 및 관련 파일을 삭제합니다.

시작하려면 새 프로젝트를 만듭니다. 터미널에서 다음 스크립트를 실행하여 create-react-app를 사용하여 새 프로젝트를 설치합니다.

  1. npx create-react-app react-tabs-component

프로젝트가 완료되면 다음 디렉터리로 변경합니다.

  1. cd react-tabs-component

새 터미널 탭이나 창에서 Create React App 시작 스크립트를 사용하여 프로젝트를 시작합니다. 브라우저는 변경 시 자동으로 새로 고쳐지므로 작업하는 동안 이 스크립트를 실행 상태로 두십시오.

  1. npm start

그러면 로컬에서 실행 중인 서버가 시작됩니다. 프로젝트가 브라우저 창에서 열리지 않으면 http://localhost:3000/을 방문하여 열 수 있습니다. 원격 서버에서 실행 중인 경우 주소는 http://your_domain:3000입니다.

브라우저는 Create React App의 일부로 포함된 템플릿 React 애플리케이션과 함께 로드됩니다.

완전히 새로운 사용자 지정 구성 요소 세트를 빌드할 것이므로 빈 프로젝트를 가질 수 있도록 일부 상용구 코드를 지우는 것부터 시작해야 합니다.

시작하려면 텍스트 편집기에서 src/App.js를 엽니다. 이것은 페이지에 주입되는 루트 구성 요소입니다. 여기에서 모든 구성 요소가 시작됩니다. Create React App으로 React 프로젝트를 설정하는 방법에서 App.js에 대한 자세한 정보를 찾을 수 있습니다.

다음과 같은 파일이 표시됩니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import logo from ./logo.svg; 줄을 삭제합니다. 그런 다음 return 문의 모든 항목을 교체하여 div 태그 집합과 h1을 반환합니다. 이렇게 하면 탭 데모를 표시하는 h1을 반환하는 유효한 페이지가 제공됩니다. 최종 코드는 다음과 같습니다.


import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <h1>Tabs Demo</h1>
    </div>
  );
}

export default App;

텍스트 편집기를 저장하고 종료합니다.

마지막으로 로고를 삭제합니다. 응용 프로그램에서 사용하지 않을 것이며 작업하면서 사용하지 않는 파일을 제거해야 합니다. 그것은 장기적으로 혼란에서 당신을 구할 것입니다.

터미널 창에서 다음 명령을 입력하여 로고를 삭제합니다.

  1. rm src/logo.svg

이제 프로젝트가 설정되었으므로 첫 번째 구성 요소를 만들 수 있습니다.

2단계 - 탭 구성 요소 만들기

이 단계에서는 새 폴더와 각 Tab을 렌더링할 Tabs 구성 요소를 만듭니다.

먼저 src 디렉토리에 components라는 폴더를 만듭니다.

  1. mkdir src/components

components 폴더 안에 Tabs.js라는 새 파일을 만듭니다.

  1. nano src/components/Tabs.js

새 Tabs.js 파일에 다음 코드를 추가합니다.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tab from './Tab';

이 구성 요소를 만드는 데 필요한 가져오기입니다. 이 구성 요소는 활성화된 탭을 추적하고 탭 목록과 활성 탭의 콘텐츠를 표시합니다.

다음으로 상태를 추적하고 Tabs.js의 imports 아래에 활성 탭을 표시하는 데 사용할 다음 코드를 추가합니다.

...

class Tabs extends Component {
  static propTypes = {
    children: PropTypes.instanceOf(Array).isRequired,
  }

  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.children[0].props.label,
    };
  }

  onClickTabItem = (tab) => {
    this.setState({ activeTab: tab });
  }

...

활성 탭에 대한 초기 상태가 추가되고 생성할 탭 배열의 0에서 시작됩니다.

onClickTabItem은 사용자가 클릭한 현재 탭으로 앱 상태를 업데이트합니다.

이제 렌더링 기능을 동일한 파일에 추가할 수 있습니다.

...

  render() {
    const {
      onClickTabItem,
      props: {
        children,
      },
      state: {
        activeTab,
      }
    } = this;

    return (
      <div className="tabs">
        <ol className="tab-list">
          {children.map((child) => {
            const { label } = child.props;

            return (
              <Tab
                activeTab={activeTab}
                key={label}
                label={label}
                onClick={onClickTabItem}
              />
            );
          })}
        </ol>
        <div className="tab-content">
          {children.map((child) => {
            if (child.props.label !== activeTab) return undefined;
            return child.props.children;
          })}
        </div>
      </div>
    );
  }
}

export default Tabs;

이 구성 요소는 활성화된 탭을 추적하고 탭 목록과 활성 탭의 콘텐츠를 표시합니다.

탭구성 요소는 탭이라는 다음 구성 요소를 사용합니다.

3단계 - 탭 구성 요소 만들기

이 단계에서는 개별 탭을 만드는 데 사용할 Tab 구성 요소를 만듭니다.

components 폴더 안에 Tab.js라는 새 파일을 만듭니다.

  1. nano src/components/Tab.js

Tab.js 파일에 다음 코드를 추가합니다.


import React, { Component } from 'react';
import PropTypes from 'prop-types';

다시 한 번 react에서 React를 가져오고 PropTypes를 가져옵니다. PropTypes는 구성 요소의 소품에서 유형 검사를 실행하는 데 사용되는 특수 propTypes 속성입니다.

다음으로 import 문 아래에 다음 코드를 추가합니다.

...
class Tab extends Component {
  static propTypes = {
    activeTab: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
  };

  onClick = () => {
    const { label, onClick } = this.props;
    onClick(label);
  }

  render() {
    const {
      onClick,
      props: {
        activeTab,
        label,
      },
    } = this;

    let className = 'tab-list-item';

    if (activeTab === label) {
      className += ' tab-list-active';
    }

    return (
      <li
        className={className}
        onClick={onClick}
      >
        {label}
      </li>
    );
  }
}

export default Tab;

이 구성 요소의 PropTypes는 activeTab 및 label이 문자열이고 필수임을 확인하는 데 사용됩니다. onClick도 필요한 기능으로 설정되어 있습니다.

Tab 구성 요소는 탭의 이름을 표시하고 탭이 활성화된 경우 추가 클래스를 추가합니다. 클릭하면 구성 요소는 onClick 핸들러를 실행하여 Tabs 구성 요소가 활성화되어야 하는 탭을 알 수 있도록 합니다.

4단계 - CSS를 추가하여 앱 스타일 지정

구성 요소를 만드는 것 외에도 CSS를 추가하여 구성 요소에 탭 모양을 부여합니다.

App.css 파일 내에서 모든 기본 CSS를 제거하고 다음 코드를 추가합니다.

[label react-tabs-component/src/App.css] .tab-list {
  border-bottom: 1px solid #ccc;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
}

.tab-list-active {
  background-color: white;
  border: solid #ccc;
  border-width: 1px 1px 0 1px;
}

이렇게 하면 탭이 인라인으로 만들어지고 활성 탭에 테두리가 있어 클릭했을 때 눈에 띄게 됩니다.

5단계 - App.js 업데이트

이제 구성 요소와 관련 스타일이 준비되었으므로 이를 사용하도록 App 구성 요소를 업데이트합니다.

먼저 Tabs 구성 요소를 포함하도록 가져오기를 업데이트합니다.

import React from 'react';
import Tabs from "./components/Tabs";
import "./App.css";

다음으로 가져온 Tabs 구성 요소를 포함하도록 return 문의 코드를 업데이트합니다.

...

function App() {
  return (
    <div>
      <h1>Tabs Demo</h1>
      <Tabs>
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
        <div label="Croc">
          After 'while, <em>Crocodile</em>!
        </div>
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
      </Tabs>
    </div>
  );
}

export default App;

관련 레이블이 있는 div는 탭에 콘텐츠를 제공합니다.

앱 구성 요소에 추가된 탭을 사용하면 이제 섹션 간을 전환할 수 있는 탭 인터페이스가 작동합니다.

완성된 코드를 보려면 이 Github 리포지토리를 볼 수 있습니다.

결론

이 튜토리얼에서는 애플리케이션의 상태를 관리하고 업데이트하기 위해 React를 사용하여 탭 구성 요소를 구축했습니다.

여기에서 훨씬 더 매력적인 UI를 만들기 위해 React 구성 요소의 스타일을 지정하는 다른 방법을 배울 수 있습니다.

또한 DigitalOcean의 전체 React.js 코딩 방법 시리즈를 따라 React를 사용한 개발에 대해 더 자세히 알아볼 수 있습니다.