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를 입히는 작업이다.
Author And Source
이 문제에 관하여(2022.04.19 Tab), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongwr/2022.04.19-Tab저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)