쉽게 만드는 React Tab 라이브러리 react-tabs

개발자가 커스텀 스타일을 쉽게 적용할 수 있도록 최소한의 스타일만 제공하여 유연한 스타일링이 가능한 라이브러리입니다. 상태 관리가 내장되어 있어 탭 선택 및 패널 표시 로직을 직접 구현할 필요 없이 간편하게 사용할 수 있습니다.

 

기본 사용법

먼저, 라이브러리를 설치합니다.

npm i react-tabs
# 또는
yarn add react-tabs

 

react-tabs는 주로 4개의 컴포넌트로 구성됩니다.

• Tabs: 전체 탭 컴포넌트를 감싸는 최상위 컨테이너입니다.

• TabList: 각 탭의 제목(라벨)들을 묶는 리스트입니다.

• Tab: 개별 탭 제목을 나타냅니다. TabList 내부에 위치해야 합니다.

• TabPanel: Tab을 클릭했을 때 보여줄 콘텐츠 영역입니다.

아래는 기본적인 사용 예시 코드입니다.

import React from 'react';
import { Tabs, TabList, Tab, TabPanel } afrom 'react-tabs';
import 'react-tabs/style/react-tabs.css'; // 기본 스타일 import

function MyTabs() {
  return (
    <Tabs>
      <TabList>
        <Tab>제목 1</Tab>
        <Tab>제목 2</Tab>
      </TabList>

      <TabPanel>
        <h2>첫 번째 탭의 콘텐츠입니다.</h2>
      </TabPanel>
      <TabPanel>
        <h2>두 번째 탭의 콘텐츠입니다.</h2>
      </TabPanel>
    </Tabs>
  );
}

export default MyTabs;

동작 원리

• Tabs 컴포넌트가 TabList와 TabPanel의 상태를 관리합니다.

• 첫 번째 Tab은 첫 번째 TabPanel에, 두 번째 Tab은 두 번째 TabPanel에 자동으로 연결됩니다.

• 사용자가 Tab을 클릭하면 해당 인덱스와 일치하는 TabPanel이 화면에 표시됩니다.

• react-tabs.css 파일을 import하면 기본적인 스타일이 적용되며, 이 CSS를 수정하거나 별도의 CSS 클래스를 추가하여 원하는 디자인으로 커스터마이징할 수 있습니다.