탭바 (Tab) 구현하기 with Switch Case문

tab 이라고 부르는 탭바를 구현해야 할 상황이 굉장히 많다.
특히 웹 구현에는 항상 빠지지 않는것같다 !!

이번에 했던 탭바 구현이 좀 마음에 들어서 기록하려고 한다 !

나중에 되면 맘에 안들겠지만 ㅋㅋㅋ ㅠㅠ

🌕 Tab

일반적으로 탭이라는것은 한 페이지 내에서 여러개의 카테고리로 탭이라는것이 나눠지고
해당 카테고리 탭을 누르면 그에 맞는 내용이 밑에 나오는것을 말한다.

🌛 상위 탭 구현

<div>
      <div style={{ display: 'flex' }}>
        <TapStyle onClick={() => handleTabClick('WAITING')}>확정 대기</TapStyle>
        <TapStyle onClick={() => handleTabClick('EXPECTED')}>
          진행 예정
        </TapStyle>
        <TapStyle onClick={() => handleTabClick('DONE')}>완료</TapStyle>
      </div>
      <div>{renderTabContent()}</div>
    </div>

일단 페이지의 return문에 탭 카테고리를 정해주어야 한다
나는 확정대기 , 진행예정, 완료 세가지로 구성하였다.

onClick 으로 handleTabClick 이 실행되게 하였다

 const handleTabClick = (tabIndex: tapType) => {
    setActiveTab(tabIndex);
  };

handleTabClick에는 setActiveTab 을 변경하는 동작을 넣었다.

🌜 하위 내용 구현

탭을 선택했을시 내가 원하는 컴포넌트를 불러와야한다.

나는 위에 설정한 탭의 값 3개인 ActiveTab의 값에 따른 탭의 내용을 보여주고자 한다.

const renderTabContent = () => {
    switch (activeTab) {
      case TAB.waiting:
        return (
          <div>
            대기 컴포넌트 
          </div>
        );
      case TAB.expected:
        return <div>진행 예정 컴포넌트</div>;
      case TAB.done:
        return <div>완료 컴포넌트</div>;
      default:
        return null;
    }
  };

renderTabContent라는 함수를 만들고 그 안에 switch - case문으로 조건을 구현한다.

해당하는 case 일 때 return을 한다 !
return안에다가 내가 불러오고싶은거 다 작성하면 된다.

단 ! default : return null;

을 꼭 해주어야 한다
이유는 case문을 나와야하기 떄문이다

🌚 불러오기

현재 작업 페이지의 return문에

<div>{renderTabContent()}</div>

이렇게 renderTabContent을 불러와주어야 한다 !

끝 !!!!!