[리액트] 메뉴탭 기능

💡 구현 목표
1. 경로를 기준으로 메뉴탭이 변경된다.
2. 메뉴들은 공통의 컴포넌트를 사용한다.

Link태그로 경로 이동

경로를 기준으로 메뉴탭이 변경되기 때문에 메뉴를 눌렀을 때 경로를 변경시켜야 한다.

그러기 위해선 리액트의 Link태그를 이용한다. to속성으로 원하는 경로를 설정한다. <Link to="/">

a태그와 달리 html파일을 새로 요청해서 전체를 리로드하지 않는다.

---

메뉴탭과 경로 일치 확인

Link태그를 통해 경로를 이동했다면 이젠 이동한 경로가 내가 원하는 경로가 맞는지 확인해야 한다.

현재 경로를 확인하기 위해 useLocation을 이용했다.

const isDashTab = location.pathname === '/';

만약 현재 경로가 /가 맞는지 아닌지 boolean값으로 알려주는 변수를 하나 만든다.

현재 메뉴가 2개여서 / , /manager 2개의 경로를 확인하는 변수를 만든다.

const isDashTab = location.pathname === '/';
const isManagerTab = location.pathname === '/manager';

---

현재 탭에 따른 스타일링

컴포넌트에 selected라는 이름으로 boolean값을 반환하는 변수들을 props해준다.

<S.MenuTab to="/" selected={isDashTab}>
	<S.MenuIcon src={isDashTab ? DashBoardBlueIcon : DashBoardIcon} />
	<S.MenuText selected={isDashTab}>대시보드</S.MenuText>
</S.MenuTab>

해당 경로가 아니면 검은 글자와 흰배경을, 맞으면 파란 글자와 회색 배경이 되도록 설정한다.

background-color: ${({selected})=>(selected ? "회색" : "흰색")};
color: ${({selected}) => (selected ? "파랑" : "검정")};

아이콘은 svg를 사용했기 때문에 현재 메뉴탭이면 파란 아이콘, 아니면 검정 아이콘을 보여준다.

<S.MenuIcon src={isDashTab ? DashBoardBlueIcon : DashBoardIcon} />

---

전체 코드

현재는 메뉴의 갯수가 적어 map함수를 사용 안했지만 만약 메뉴의 갯수가 많다면 map함수를 이용하는게 더 좋을거 같다.

const MenuTab = () => {
	const location = useLocation();
	const isDashTab = location.pathname === '/';
	const isManagerTab = location.pathname === '/manager';
	return (
		<S.MenuTabWrap>
			<S.MenuTab to="/" selected={isDashTab}>
				<S.MenuIcon src={isDashTab ? DashBoardBlueIcon : DashBoardIcon} />
				<S.MenuText selected={isDashTab}>대시보드</S.MenuText>
			</S.MenuTab>
			<S.MenuTab to="/manager" selected={isManagerTab}>
				<S.MenuIcon src={isManagerPage ? AdManagementBlueIcon : AdManagementIcon} />
				<S.MenuText selected={isManagerTab}>광고관리</S.MenuText>
			</S.MenuTab>
		</S.MenuTabWrap>
	);
};