React 에서 Tab Component 구현하기 상태 관리 방법

안녕하세요 오늘은 React 관련해서 첫번째 포스팅인데요, 바로 리액트를 활용해서 탭 컴포넌트를 구현하는 방법에대해서 설명하려고 합니다. React를 사용하면 동적이고 효과적인 탭 구현이 가능합니다. 이번에는 React를 활용하여 탭을 만드는 과정을 살펴보겠습니다. 컴포넌트의 활용과 상태(state)를 이용하여 동적인 탭을 만들어 보겠습니다.

프로젝트 초기 설정

Create React App으로 프로젝트 생성

우선 React 애플리케이션을 시작하기 위해 Create React App을 사용합니다.

npx create-react-app tab-app
cd tab-app

필요한 라이브러리 설치

npm install react-router-dom

React Router 라이브러리를 사용하여 탭 간의 페이지 전환을 구현할 것입니다.

컴포넌트 생성

Tab 컴포넌트 생성

// src/components/Tab.js

import React from 'react';

const Tab = ({ label, activeTab, onClick }) => {
  const handleClick = () => {
    onClick(label);
  };

  return (
    <div
      className={`tab ${activeTab === label ? 'active' : ''}`}
      onClick={handleClick}
    >
      {label}
    </div>
  );
};

export default Tab;

Tab 컴포넌트는 각 탭을 나타내며, 현재 활성화된 탭인지 여부를 판단하여 스타일을 적용합니다.

Tabs 컴포넌트 생성

// src/components/Tabs.js

import React, { useState } from 'react';
import Tab from './Tab';

const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(children[0].props.label);

  const handleTabClick = (tabLabel) => {
    setActiveTab(tabLabel);
  };

  return (
    <div className="tabs">
      {children.map((child) => (
        <Tab
          key={child.props.label}
          label={child.props.label}
          onClick={handleTabClick}
          activeTab={activeTab}
        />
      ))}
      <div className="tab-content">
        {children.map((child) =>
          child.props.label === activeTab ? child.props.children : null
        )}
      </div>
    </div>
  );
};

export default Tabs;

위와 같이 Tab들을 렌더링하고 현재 활성화된 탭에 해당하는 콘텐츠를 표시합니다.

사용 예제

App.js에서 Tabs 사용

// src/App.js

import React from 'react';
import Tabs from './components/Tabs';

function App() {
  return (
    <div className="App">
      <Tabs>
        <div label="Tab 1">
          <p>Content for Tab 1</p>
        </div>
        <div label="Tab 2">
          <p>Content for Tab 2</p>
        </div>
        <div label="Tab 3">
          <p>Content for Tab 3</p>
        </div>
      </Tabs>
    </div>
  );
}

export default App;

이제 실습 예제코드를 보여드리겠습니다. 다음과 같이 세 개의 탭을 만들어 각각에 대한 콘텐츠를 정의할 수 있습니다.

 

 

이와 같이 React를 사용하여 탭을 구현하면 컴포넌트와 상태(state)의 효과적인 활용을 통해 간단하게 구현할 수 있습니다. 각 탭의 클릭 이벤트에 대한 상태 관리를 통해 동적인 탭을 만들어보았습니다. 여러분들도 사용자 친화적이고 동적인 웹 페이지를 구현할 수 있을거라고 생각합니다. 도움이 되었다면 다른글도 읽어봐주세요 감사합니다.