React | 탭 클릭 시 active 처리하기 with useState

컴포넌트에서 바뀌는 값을 관리할 때 리액트의 Hooks 중 하나인 useState를 사용하게 된다.
요즘 Hooks을 이용한 여러가지 예제를 많이 만들어 보고 있다.

📌 import / 변수선언

useState의 첫번째 원소는 현재 상태, 두번째 원소는 Setter이다.

import { useState } from "react";

const Tab = () => {
  const tabName = data.map(({ name }) => name);
  const [activeTab, setActiveTab] = useState<string>(
    tabName[0]
  );
};

export default Tab;

일단 api에서 받은 name필드를 map으로 배열을 만들어 준 뒤, name의 필드는 string이므로 string라고 명시를 해주고, useState안에 초기값을 배열의 tab에 active가 되도록 넣어줬다. (Hooks에서는 다양한 타입이 될 수 있다. array, number, string, boolean, etc)

📌 변수 재선언

const handleClickTab = (name: string) => {
  setActiveTab(name);
};

이벤트가 발생했을 때 특정 함수가 호출되도록 설정을 했다. 이벤트를 설정할 때에는 함수 타입의 값을 넣어주어야 한다.

📌 코드 완성

import { useState } from "react";

const Tab = () => {
  const tabName = data.map(({ name }) => name);
  const [activeTab, setActiveTab] = useState<string>(
    tabName[0]
  );

  const handleClickTab = (name: string) => {
    setActiveTab(name);
  };

  return (
    <section>
      <Tab
        tabActive={activeTab}
        handleClick={handleClickTab}
      />
    </section>
  );
};

export default Tab;

Tab이라는 컴포넌트에 Props를 통해 값을 전달해주었다. 그리고 마무리로 active된 탭의 스타일을 변경해주면 끝!