[React] Tab Menu 탭 메뉴 기능 구현

 

import React, { useState} from "react";

function TabMenu() {
  const [activeIndex, setActiveIndex] = useState(0);
  const tabContArr = [
    {
      id: 0,
      tabTitle: "받은 질문",
      tabCont: (
        <div>
          <Tab1></Tab1>
        </div>
      ),
    },
    {
      id: 1,
      tabTitle: "보낸 질문",
      tabCont: (
        <div>
          <Tab2></Tab2>
        </div>
      ),
    },
  ];

  return (
    <div style={{ padding: "10px" }}>
      <ul>
        {tabContArr.map((item) => (
          <li
            className={activeIndex === item.id ? "is-active" : ""}
            onClick={() => setActiveIndex(item.id)}>
            {item.tabTitle}
          </li>
        ))}
      </ul>
      
      {tabContArr
        .filter((item) => activeIndex === item.id)
        .map((item) => (
          <div>{item.tabCont}</div>
        ))}
    </div>
  );
}

function Tab1() {
  return <div>TAb1 content</div>;
}

function Tab2() {
  return <div>TAb2 content2</div>;
}

export default TabMenu;