[Next js] 엑티브 링크와useSelectedLayoutSegment
주소 연결에 따른 아이콘 또는 nav 또는 tab이 바뀌는 경우 사용하는
useSelectedLayoutSegment 라는 넥스트에서 지원해주는 훅이 있습니다.
기존에 활성화된 nav나 tab을 만들기 위해서는 usePathname 도 있었지만 별도의 처리가 필요했습니다.
useSelectedLayoutSegment를 사용시 별도 처리없이 간단하게 만들 수 있습니다.
주소가 바뀔경우 useSeletedLayoutSegment는 해당 패이지가 존재하는 폴더에 이름을 전달해줍니다.
localhost:3000/home 의 경우
log에는 home가 찍힙니다.
(아래는 추후 설명할 useSelectedLayoutSegments 입니다)
useSelectedLayoutSegments 에 대해서
useSelectedLayoutSegment는 최상위 폴더만 출력했다면
useSelectedLayoutSegments 는 해당 경로까지의 폴더를 감지하여 배열의 형태로 반환해줍니다.
위와 같은 구조에서 /test/page 로 이동시
useSelectedLayoutSegment 는 test/page 경로의 최상위 폴더인 test가 출력되었으며,
useSelectedLayoutSegments 는 ['test','page'] 가 출력됩니다. 해당 경로의 폴더 전체가 배열로 반환되었습니다.
자식 폴더까지 감지하고자 한다면 'useSelectedLayoutSegments' 를 사용해야 한다는걸 알 수 있습니다.
이제 useSelectedLayoutSegment가 어떤 값을 반환하는지 알았기 때문에 간단하게 만들 수 있을 것 같습니다!.
예를 들자면 {segment === '경로' ? ( 해당 경로일 경우의 아이콘 및 컴포넌트) : (아닐경우의 아이콘 및 컴포넌트)} 처럼
삼항 연산자를 사용하는 방식이라던지..?