React 에서 탭 기능 구현

여러 프로젝트에서 자주 사용하는 탭 기능에 대해 정리해보았다.

tab으로 보여줄 데이터

const tabData = [
    {
      title: "Seoul",
      content:
        "서울 Seoul. 서울은 대한민국의 수도로서 정치, 경제, 사회, 문화의 중심지이다. 서울의 면적은 605㎢로서 도쿄의 23개 특별구와 비슷하며, 싱가포르와 뉴욕시보다 다소 작은 크기이다. 서울은 외사산과 내사산에 둘러싸인 분지의 지형이다.",
    },
    {
      title: "Jeju",
      content:
        "제주도(濟州島, 영어: Jeju Island)는 대한민국의 남해에 위치한 섬이자 대한민국에서 가장 큰 섬이다. 또한 제주도는 행정구역상 제주특별자치도에 속한다. 섬의 면적은 1,846km²인데 이는 남한 면적의 1.83%에 해당한다.",
    },
    {
      title: "Busan",
      content:
        "부산광역시(釜山廣域市, 영어: Busan Metropolitan City)는 한반도 남동부에 위치한 광역시이다. 대한민국의 제2의 도시이자 최대의 해양(항구) 도시이며, 부산항을 중심으로 해상 무역과 물류 산업이 발달하였다. 일본과는 대한해협을 사이에 두고 마주하고 있다. 시청 소재지는 연제구 연산동이며, 행정구역은 15구 1군이다.",
    },
  ];

 

전체 코드

⭐ onClick이벤트를 통해 전달된 index를 tab에 저장 후 tabData 중에서 일치한 index 요소에 있는 content를 불러와 보여준다.

import { css } from "@emotion/react";

export default function Home() {

  const [tab, setTab] = useState(0);
  const selectTabHandler = (index: number) => {
    setTab(index);
  };

  return (
    <>
      <Seo />
      <section css={HomePage}>
        <div className="tabContainer">
          <ul>
            {tabData.map((x, index) => (
              <li
                key={index}
                onClick={() => selectTabHandler(index)}
                className={tab === index ? "on" : ""}
              >
                {x.title}
              </li>
            ))}
          </ul>
          <div className="tabContent">
            <p>{tabData[tab].content}</p>
          </div>
        </div>
      </section>
    </>
  );
}


const HomePage = css`
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  background: #fff;

  .tabContainer {
    width: 40%;
    height: 400px;
    border: 1px solid #000;

    ul {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 15%;

      li {
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-color: #797979;
        &.on {
          background-color: #b9dfee;
        }
      }
    }

    .tabContent {
      padding: 24px;
      height: 85%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #b9dfee;

      p {
        text-align: center;
      }
    }
  }
`;