2022.04.19 Tab

useState만으로 사용하여 tab을 만들었는데, 그러다보니 클릭 시마다 바뀌어 버그가 발생한 부분을 발견하였다.

그래서 새롭게 tab을 만들어 보았다.

const Info = () => {
  const isLogin = useSelector(
    (isLogin: RootState) => isLogin.changeLoginStatus.isLogin
  );
  const [currentTab, setCurrentTab] = useState(0); //tab state
  const tabMenu = [{ name: "식당 상세" }, { name: "리뷰" }]; //tab 목록
  const selectMenuHandler = (index: React.SetStateAction<number>) => {
    setCurrentTab(index); 
  }; //index로 state를 변환시켜서 적용하는 함수

  return (
    <InfoDiv>
      <TabMenu>
        {tabMenu.map((menu, idx) => ( 
          <TabLi
            key={idx}
            className={idx === currentTab ? "submenu focused" : "submenu"}
            onClick={() => {
              selectMenuHandler(idx);
            }}
          >
            {menu.name}
          </TabLi>
        ))}
      </TabMenu>
      {currentTab === 1 ? (
        isLogin === true ? (
          <ReviewMember />
        ) : (
          <ReviewNonMember />
        )
      ) : (
        <DetailInfo />
      )}
    </InfoDiv>
  );
};

li를 이용하여 탭 리스트를 만든 후, index를 이용하여 state를 변환시켜서 각각마다 다른 css를 입히는 작업이다.