React Tab component 구현하기

리액트 탭 컴포넌트 만들기

파일구조

src/
  components/
    Tabs.jsx
    Tab.jsx
  pages/
    Page01.jsx
    Page02.jsx
  App.js

Tabs.js

import React, { useState } from "react";

export default function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);

  // children 은 Tab 컴포넌트 배열
  const tabs = React.Children.toArray(children);

  return (
    <div className="tabs">
      {/* 탭 버튼 */}
      <div className="tab-list">
        {tabs.map((tab, index) => (
          <button
            key={index}
            className={`tab-btn ${activeIndex === index ? "active" : ""}`}
            onClick={() => setActiveIndex(index)}
          >
            {tab.props.label}
          </button>
        ))}
      </div>

      {/* 탭 패널 */}
      <div className="tab-panel">
        {tabs[activeIndex]}
      </div>
    </div>
  );
}

Tab.js

import React from "react";

export default function Tab({ children }) {
  return <div>{children}</div>;
}

Page01.js

import React from "react";

export default function Page01() {
  return (
    <div>
      <h2>탭 1 화면</h2>
      <p>여기는 첫 번째 페이지 내용입니다.</p>
    </div>
  );
}

Page02.js

import React from "react";

export default function Page02() {
  return (
    <div>
      <h2>탭 2 화면</h2>
      <p>여기는 두 번째 페이지 내용입니다.</p>
    </div>
  );
}

App.js

import React from "react";
import Tabs from "./components/Tabs";
import Tab from "./components/Tab";
import Page01 from "./pages/Page01";
import Page02 from "./pages/Page02";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>React Tabs Components</h1>
      <Tabs defaultIndex={0}>
        <Tab label="Tab 1">
          <Page01 />
        </Tab>
        <Tab label="Tab 2">
          <Page02 />
        </Tab>
        <Tab label="Tab 3">
          <p>세 번째 탭 내용!</p>
        </Tab>
      </Tabs>
    </div>
  );
}

Style.css

.tabs {
  max-width: 600px;
  margin: 0 auto;
}

.tab-list {
  display: flex;
  border-bottom: 2px solid #ddd;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  font-weight: bold;
}

.tab-btn.active {
  background: white;
  border-bottom: 2px solid #007bff;
  color: #007bff;
}

.tab-panel {
  padding: 16px;
  border: 1px solid #ddd;
  border-top: none;
  background: white;
}