tab 메뉴 클릭 시 tab 메뉴 배경 제어 및 조건부 렌더링 (React-typescript)

페이지 사이드에 tab을 만들어서 클릭 시 클릭 된 tab의 색깔을 변하게 하고, tab에 해당되는 컴포넌트를 조건부 렌더링 하는 코드를 작성했다.
1.useState훅
2.map함수
3.클릭 시 동작할 handler 함수
4.동적 class
이 네 가지로 간단하게 구현할 수 있다.

우선 tab 메뉴에 들어갈 객체배열 데이터를 만들어주자.

  const tabData = [
    { id: 1, content: "제품 카테고리 1" },
    { id: 2, content: "제품 카테고리 2" },
    { id: 3, content: "제품 카테고리 3" },
    { id: 4, content: "제품 카테고리 4" },
    { id: 5, content: "제품 카테고리 5" },
  ];

그 다음 useState훅을 이용해서 activeTab이라는 상태와 activeTab을 업데이트하는 setActiveTab 함수를 선언한다. useState는 React의 훅으로, 함수형 컴포넌트 내부에서 상태를 관리할 수 있게 도와준다. 초기 상태로는 첫 번째 탭이 활성화되어 있는게 자연스러우므로, 초기값으로 첫 번째 탭의 id를 사용하자.

(index 번호는 0번째부터 세어나가기 때문에 tabData의 0번째 객체를 넣어줘야 첫번째 탭의 id가 활성화된다.)

const [activeTab, setActiveTab] = useState<number>(tabData[0].id);

이제 실제 렌더링 될 탭 메뉴를 만들어주자. map 함수를 이용해서 배열의 자식 객체들을 tab이라는 이름으로 하나하나 화면에 뿌려줄 것이다. tab 객체들을 구분하기 위해 key 값으로 tab의 id를 넣어주자. 클릭 이벤트도 구현해야 하기 때문에, tabClickHandler라는 이름의 함수를 onClick 콜백함수로 넣어주었다. 인자로는 tab의 id값을 넣어주자.

  return (
    <>
      <ul>
        {tabData.map((tab) => {
          return (
            <li
              key={tab.id}
              onClick={() => {
                tabClickHandler(tab.id);
              }}
            >
              {tab.content}
            </li>
          );
        })}
      </ul>
    </>
  );

이번에는 onClick 콜백 함수로 넣어주었던 tabClickHandler 라는 이름의 handler 함수를 만들어 주자. 나는 다섯개의 탭을 가지고 있다. 초기상태에는 0번째 배열값인 첫번째 탭이 활성화 되어있지만, 이후에는 내가 클릭하는 탭이 활성화 되어야 하기 때문에 tabId라는 이름으로 매개변수를 받아서 useState훅으로 선언해주었던 setActiveTab 함수의 인자로 넣어주었다.

(tabId라는 이름으로 매개변수를 받아서 함수를 정의해 주었고, 함수를 호출할 때(onClick콜백 부분) tab.id를 넣어주었기 때문에 setActiveTab함수의 인자로 실제 tab.id 가 들어가게 되는 것이다. 즉, tabId와 tab.id가 같은 값을 공유하게 되는 것)

  const tabClickHandler = (tabId: number): void => {
    setActiveTab(tabId);
    console.log(`${tabId}번 탭이 클릭됨`);
  };

이제 마지막으로 className 속성에 동적 class를 넣어주고 css를 수정해주면 끝이다. tabClass라는 이름의 변수로 동적 class를 선언하여 삼항 연산자를 이용해 tab.id가 activeTab(활성화 됨)이면 subMenu라는 class의 이름에 active를 추가해주고, 아니라면 ""로, 그대로. 이렇게 만들어 준 동적 class를 className 속성으로 넣어주었다.

  return (
    <>
      <ul>
        {tabData.map((tab) => {
          const tabClass = `${styles.subMenu} ${
            tab.id === activeTab ? styles.active : ""
          }`;
          return (
            <li
              key={tab.id}
              onClick={() => {
                tabClickHandler(tab.id);
              }}
              className={tabClass}
            >
              {tab.content}
            </li>
          );
        })}
      </ul>
    </>
  );

css 수정본 (scss 모듈화 해서 사용중)

    .subMenu {
	  // 기본적인 스타일을 작성해주자...
      
      &.active {
        background-color: lightblue;
      }
    }

이제 각각의 탭이 클릭 될 때마다 활성화되는 것을 확인했으니 컴포넌트를 조건부 렌더링 해주자.

  return (
    <>
      <ul>
        {tabData.map((tab) => {
          const tabClass = `${styles.subMenu} ${
            tab.id === activeTab ? styles.active : ""
          }`;
          return (
            <li
              key={tab.id}
              onClick={() => {
                tabClickHandler(tab.id);
              }}
              className={tabClass}
            >
              {tab.content}
            </li>
          );
        })}
      </ul>
      // 예시
      {activeTab === 1 && <Component1 />}
      {activeTab === 2 && <Component2 />}
      {activeTab === 3 && <Component3 />}
      {activeTab === 4 && <Component4 />}
      {activeTab === 5 && <Component5 />}      
    </>
  );```