#03 Next App Router : useSelectedLayoutSegment (현재 위치한 path 찾기)

 

1️⃣ 클라이언트 컴포넌트 훅인 useSelectedLayoutSegment() 사용해서 현재 위치한 path 가져오기 가능

2️⃣ Active Link를 적용하여 해당 위치 강조 가능

: 다른 페이지로 이동이 가능한 사이드바 (Link)를 클릭했을때,

현재 페이지가 active 상태, 다른 페이지들은 active 아닌 상태를 가진 링크

---

[css]

 * 왼쪽 오른쪽 사이즈가 다를때 가운데 정렬하는 방법 = 각각에 flex-grow:1

---

https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment

Functions: useSelectedLayoutSegment | Next.js

⭐주소랑 연동되는 것을 확인하기!

=> 내가 현재 어디에 위치하는지 알아야함

=> 서버 컴포넌트에서는 불가능

=> 클라이언트 컴포넌트에서 작업해야함

=> next의 훅 중에서, "useSelectedLayoutSegment" 사용하기

(레이아웃보다 한 수준 아래에 있는 active 경로 세그먼트를 읽음!)

//현재 위치값 (상위 폴더명)
export default function NavMenu(){
		
    const segment = useSelectedLayoutSegment();
    console.log(segment); // home, compose, explore 등
    
    return()
}

 

//현재 위치값 (상위 폴더명 안의 하위 폴더명)
export default function NavMenu(){
		
    const segment = useSelectedLayoutSegments();
    console.log(segment); //( compose > tweets ) => ['compose','tweets']
    
    return()
}

⭐ useSelectedLayoutSegment()는 클라이언트 컴포넌트 훅 

⭐ Layout은 서버 컴포넌트

=> 레이아웃으로 임포트된 클라이어트 컴포넌트를 통해서만 사용 가능

 

1️⃣ layout.tsx

2️⃣ page.tsx : 현재 url을 가져오고 싶으면 usePathname() 사용하기 [string 반환]

* useSearchParams() : url의 쿼리스트링 반환

---

 

💡서버 컴포넌트에서 이벤트 리스너 사용 불가능한 이유

⭐ OnClick과 같은 함수는 서버 컴포넌트에서 오류 발생할 수 있으니 "클라이언트 컴포넌트"로 변경하기

=> 서버 컴포넌트에서는 사용자에게 즉각적인 피드백을 제공 + ui 업데이트 불가능

=> 이벤트 리스너 사용 불가능!

Rendering: Client Components | Next.js

✅ 서버 컴포넌트 : 클라이언트 컴포넌트에 대한 참조를 포함하는 'RSC페이로드'의 데이터 형식으로 렌더링됨

✅ RSC페이로드 ( React Server Component Payload) 

 

✅ 클라이언트 : RSC페이로드를 클라이언트 / 서버 컴포넌트 트리 조정 + DOM 업데이트에 사용 

✅ JS 지침을 hydrate에 사용하며 클라이언트 컴포넌트 구성함

✅ hydrate : 이벤트리스너를 DOM에 연결하여 정적 HTML을 대화형으로 만드는 프로세스

 

✅ 해당 UI를 대화형 (상호작용하게 만듦) => 서버 컴포넌트에서는 이벤트리스너 사용 불가능

 

---

💡RSC와 SSR

✅ 유사점 : 서버에서 컴포넌트를 렌더링 함!

 

✅ 차이점 : 렌더링의 결과값과 동작방식이 다름!

✅ RSC : RSC 페이로드 (JSON 포맷)

=> 그 자체로 React 컴포넌트임

=> 별도의 JS 번들 파일 없이 브라우저에서 컴포넌트로 사용됨

 

✅ SSR : 서버에서 HTML 생성

=> 클라이언트로 전달된 JS 번들 파일과 수화되는 과정을 거쳐 React 컴포넌트로 사용됨

=> 기존의 react컴포넌트이며, 클라이언트 컴포넌트라고 부름 

 

 

 

 

 

 

 

끝.

 

 

 

 

출처 및 참고:

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4