[React]Tab components 구현

소개

React와 Styled-Components를 사용하여 탭 컴포넌트를 구현하는 방법

구현 조건

• 페이지 이동이 아닌 로케이션 변경: 탭을 클릭하면 페이지 이동 없이 해당 탭의 내용 표시
• 하위 탭 처리: 하위 탭이 있을 경우에도 로케이션의 로케이션으로 구현
• Styled-Components 사용: 모든 스타일링은 Styled-Components로 구현
• 간격 설정: 탭들 사이의 간격을 동일하게 설정 (justify-content: space-between).
• calc 함수 사용: 레퍼런스에서 calc() 함수를 이용하여 면적 100%를 3으로 나눠 구현 (width: calc(100% / 3)).
• map 메서드 사용: 탭 배열을 .map() 메서드를 사용하여 동적으로 생성.

코드

App.tsx

import { Header } from '../../components/common/Header'
import React from 'react'
import styled from 'styled-components';
import { Tab } from '../../components/common/Tab';

export function Notice() {
  return (
    <>
      <Header />
      <Tab tabs={['공지사항', '자료실', 'FAQ', 'Q&A']} />
    </>
  );
}

Tab.tsx

import React, { useState } from 'react';
import styled from 'styled-components';
import Tab_bg_img_src from '../../assets/img/tab_bg.png';

type TabProps = {
  tabs: string[];
};

const Tab_bg_img = styled.div`
  background-image: url(${Tab_bg_img_src});
  height: 10vh;
  background-repeat: no-repeat;
`;

const TabContainer = styled.div`
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
`;

const TabButton = styled.button<{ active: boolean }>`
  background-color: ${(props) => (props.active ? '#fff' : '#CBD8EE')};
  color: ${(props) => (props.active ? '#497ED9' : '#fff')};
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 25px;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
  line-height: 20px;
  margin-top: 20px;
  width: calc(100% / 4); // 탭의 수에 따라 나누기
`;

const TabContent = styled.div`
  background-color: #fff;
  padding: 20px;
`;

export const Tab: React.FC<TabProps> = ({ tabs }) => {
  const [currentTab, setCurrentTab] = useState(0);

  const handleTabClick = (tabIndex: number) => {
    setCurrentTab(tabIndex);
  };

  return (
    <Tab_bg_img>
      <TabContainer>
        {tabs.map((tab, index) => (
          <TabButton key={index} active={index === currentTab} onClick={() => handleTabClick(index)}>
            {tab}
          </TabButton>
        ))}
      </TabContainer>
      <TabContent>{tabs[currentTab]} 내용입니다.</TabContent>
    </Tab_bg_img>
  );
};

결론

이 포스트에서는 React와 Styled-Components를 사용하여 간단한 탭 컴포넌트를 구현했습니다.
탭 간의 간격을 동일하게 설정하고, calc() 함수를 사용하여 탭의 넓이를 동적으로 계산하였습니다.
또한, useState를 통해 현재 선택된 탭의 상태를 관리하였습니다.
이 방법을 통해 유지보수가 쉽고 확장 가능한 탭 컴포넌트를 구현할 수 있습니다.