React 컴포넌트 - Tabs

안녕하세요 트리플랩(TriplexLab) 입니다.
이번 포스터에서는 React 컴포넌트 - Star글이어서 Tabs에 관해서 이야기를 해보겠습니다.

Tabs라고 하면 FE(프론트 개발자)가 흔히 많이 작업하는 기능중에 하나 입니다.

Tabs UI 디자인

보통은 이렇게 생겨습니다.

그럼 바로 React 컴포넌트 - Tabs에 코드를 공유하겠습니다.

Tabs 코드

커스텀 훅으로 빼서 별도로 관리할 의도 입니다.

// useTabs.tsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";

type TabProps = {
  queryKey: string;
  queryValue: string;
};

export default function useTabs({ queryKey, queryValue }: TabProps) {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState({ queryKey, queryValue });

  const handleTabChange = ({ queryKey, queryValue }: TabProps) => {
    setActiveTab({ queryKey, queryValue });
    navigate(`?${queryKey}=${queryValue}`);
  };

  return {
    activeTab,
    handleTabChange,
  };
}

useTabs 사용

import { useState } from "react";
import styled from "styled-components";
import useTabs from "../hook/useTabs";

function Chart() { //✅ 예시를 보여주기 위해서 이곳에 만듬
  return <h1>Chart</h1>;
}

function Price() { //✅ 예시를 보여주기 위해서 이곳에 만듬
  return <h1>Price</h1>;
}

function Tab() {
  const { activeTab, handleTabChange } = useTabs({ 👉이와 같이 호출해서 인자로 기본적인 값들을 넣습니다.
    queryKey: "search", //주소창 URL query이 변경되기 때문에 queryKey자리에 들어가 값
    queryValue: "chart", //주소창 URL query이 변경되기 때문에 queryValue자리에 들어가 값
  });

  return (
    <TabStyle>
      <div className="tabs">
        <button
          onClick={() => //👉 클릭할때 해당 버튼의 query를 인자로 전달 합니다.
            handleTabChange({
              queryKey: "search",
              queryValue: "chart",
            })
          }
          className={activeTab.queryValue === "chart" ? "active" : ""}
        >
          Tab1
        </button>
        <button
          onClick={() => //👉 클릭할때 해당 버튼의 query를 인자로 전달 합니다.
            handleTabChange({
              queryKey: "search",
              queryValue: "price",
            })
          }
          className={activeTab.queryValue === "price" ? "active" : ""}
        >
          Tab2
        </button>
      </div>

      <div>
		//👉 해당 query에 맞는 본문 내용 컴포넌트를 활성화 합니다.!
        {activeTab.queryValue === "chart" && <Chart />}
        {activeTab.queryValue === "price" && <Price />}
      </div>
    </TabStyle>
  );
}

const TabStyle = styled.div`
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  background-color: rgba(108, 15, 15, 0.5);
  padding: 7px 0px;
  border-radius: 10px;
  .tabs {
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  a {
    display: block;
  }
`;

export default Tab;

✅ 정리

이렇게 Tabs 기능에 대해서 가볍게 공유했습니다.
해당 코드는 기본적인 스타일만 적용되어서 추후에는 스타일 이쁘게 적용해서 Tabs UI 디자인 공유하겠습니다. 

감사합니다! :)