[Next.js] useSelectedLayoutSegment와 useSelectedLayoutSegments에 대해 알아보자 !

❗️useSelectedLayoutSegment

✅ 클라이언트 컴포넌트에서만 사용할 수 있는 훅으로 'use client'필수 

✅ 현재 active 한 segment의 값을 (/ 가 포함되지 않은) 반환 

✅ Header Footer와 같이 글로벌하게 사용되는 레이아웃 컴포넌트에서 이를 활용하여 조건부 처리가 가능

 

경로	url	return
app/layout.tsx	/segment	segment
app/test/layout.tsx	/segment	null
app/layout.tsx	/	null

 

---

❗️useSelectedLayoutSegments

✅ useSelectedLayoutSegment와 동일하게 클라이언트 컴포넌트에서만 사용할 수 있느 훅으로 'use client'필수

✅ 현재 active 한 segment의 값을 (/ 가 포함되지 않은) 문자열 배열로 반환

경로	url	return
app/layout.tsx	/segment/test	[segment, test]
app/layout.tsx	/segment	[segment]
app/layout.tsx	/	[ ]
app/test/layout.tsx	/segment	[ ]
app/test/layout.tsx	/segment/test	[test]

 

---

❗️활용

useSelectedLayoutSegment와 useSelectedLayoutSegments를 활용하는 방법으로는 

이런 NavMenu가 있을 때 각 버튼 별로 url이 다르다고 가정했을 때,

각 버튼을 클릭할 때 useSelectedLayoutSegment를 사용하여 현재 segment에 대한 값을 받아와서 

각 값 별로 다른 스타일 값을 사용하면 된다.

export default function NavMenu() {
  const segment = useSelectedLayoutSegment();

  return (
    <Link href="/home">
      <div>
        {segment === "home" ? (
            <div>진하게</div>
        ) : (
            <div>안진하게</div>
        )}
      </div>
    </Link>
  );
}

내 현재 Link에 대한 segment가 home이면 진하게 아니면 안진하게 !

이렇게 활용하면 좋을것이다.

이게 바로 ActiveLink~~~~