[Next.js] private, useRouter, ActiveLink

private 폴더

• 폴더명 앞에 _를 붙이면 private 폴더가 되며 경로에 영향을 주지 않음
  • private폴더는 단순 폴더 정리용이라고 보면 된다.

useRouter

• 클라이언트에서 라우팅 하는 라우터

  • next/navigation에서 동작

    const router = useRouter();
    router.push("경로") // 이동 후 뒤로가기 시 현재 페이지로 이동
    // 만약 현재 페이지가 특정 경로로 redirect를 해주는 페이지라면 
    // 현재 페이지로 뒤로가기 하면 다시 redirect 해주는 무한 반복임으로 문제가 될 수 있다
    
    router.replace("경로") // 이동 후 현재 페이지로 가지지 않음

ActiveLink (클릭표시, useSelectedLayoutSegment)

• 주소와 연동돼서 만약 주소와 일치하는 컴포넌트라면 해당 컴포넌트를 진하게 표시하는 등 동적인 표시를 해주는 기능

  • client component에서 동작함으로 ‘use client’ 작성해주기

  • client component 전용인 next/navigation의 useSelectedLayoutSegment 함수를 활용

  • useSelectedLayoutSegment는 layout.tsx에서 import한 컴포넌트만 쓸 수 있다!
    - page.tsx에서 쓰면 무조건 null이 나옴에 유의할 것

    const segment = useSelectedLayoutSegment();
    -> 레이아웃 상 가장 최상위 부모의 경로를 나타냄
    
    만약 s를 붙여 useSelectedLayoutSegments()를 쓰면
    -> 배열형태로 모든 경로를 표시해줌 ['조상','부모','현재'] 등
    
    page내에선 조건문 써주면 됨
    
    {segment === "이 컴포넌트 경로 이름" ? 진한 아이콘 : 연한 아이콘}