팀 과제
팀 과제를 진행하며 사이드바, 헤더의 레이아웃과 breadcrumb라고 하는 현재 라우팅 위치를 나타내는 컴포넌트를 만들었다.
레이아웃
몇 번의 변화가 있긴 했지만 최종적으로 내가 만들어야 하는 레이아웃은 좌측에 사이드바가 있고 상단에 헤더, 그리고 헤더 아래에 각 페이지 라우팅이 들어가면 된다.
여기서 사이드바의 경우는 평소에는 좁은 상태로 각 메뉴의 아이콘만 표시되고, 마우스 호버가 되면 사이드바가 펴지며 아이콘과 함께 나머지 내용을 모두 표시하도록 했다.
이를 위해서 사이드바를 담고있는 sidebarContainer를 두고 이 컨테이너의 width를 평상시엔 30px, 호버 시엔 300px로 늘리며 overflow를 hidden으로 두었다.
그리고 헤더와 페이지를 담고있는 부분을 pageContainer로 감싸고 사이드바가 닫혀있을때의 크기인 30px만큼 좌측 padding을 주어 닫혀있을때 모든 페이지가 보이게 했다.
Breadcrumb
breadcrumb는 현재 페이지까지 오면서 거쳐온 라우팅을 표시해주는 컴포넌트다.
ex)bootstrap 의 Breadcrumb
이를 표시하기위해선 어떤 경로를 거쳐서 왔는지 정보를 알아야하는데, 우리는 react-router를 사용해서 페이지 라우팅을 하고 있었기 때문에 react-router에서 제공하는 useLocation을 사용했다.
useLocation의 반환값 중 pathname을 사용한다
// localhost:3000/abc/d/e 로 라우팅한 상태라면
const location = useLocation()
console.log(location.pathname) // /abc/d/e이런식으로 출력된다.
그래서 나는 location을 split으로 '/'기준으로 구분하여 각 path 배열에 담아 렌더링했다.
그리고 실제 이동할 때는 /d, /e가 아니라 /abc/d, /abc/d/e로 이동해야하기때문에 reduce를 사용해 앞선 path를 축적해서 클릭시 해당 축적된 링크로 이동하도록 만들었다.
