인프런 커뮤니티 질문&답변
작성한 질문수
layout 컴포넌트 내 클라이언트 컴포넌트
해결된 질문
작성
·
31
0
안녕하세요~ 강의 내용 중 궁금한게 있는데요
layout에선 usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다 라고 말씀해주셨는데
이 개념은 단순 서버 컴포넌트와 클라이언트 컴포넌트에 따른 차이점과 동일한 의미 아닌가요??
next.js 자체가 서버컴포넌트 일 경우 usepathname, usesearchparams 와 같은 훅을 사용할 수 없는데
Page.tsx 컴포넌트도 마찬가지 아닌가요??
'layout에선' usepathname, usesearchparams 와 같은 값에 접근할 수 없기 때문에 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야한다. 라는 말씀이 Page.tsx 에서의 사용법과 어떤 차이점이 있는지 잘 이해가 가질 않습니다...
아 참고로
next 클라이언트 페이지 라우팅 시 layout영역은 리렌더링 되지 않고 page.tsx 영역만 렌더링된다라는 partial rendering 개념은 이해했습니다.
강의랑 유튜브 항상 잘 보고있습니다. 양질의 영상 제공해주셔서 감사합니다!
답변 2
0
동일한 의미가 맞습니다.
(Page.tsx 컴포넌트도 마찬가지 입니다.)
정확하게 이해하신것 같아요..!
다만, 강의에서 'use client' 지시어를 활용해 클라이언트 컴포넌트를 통해 해당 값에 접근해야 한다라는 말의 맥락은 Page.tsx 와 접근 방법이 차이점이 있다는 뜻은 아니어요.
그보다는
'layout 에선' searchParams 에 접근할 수 없다. 하지만, Page.tsx 에서는 prop 으로 searchParams 등의 값에 접근할 수 있어서요. 이러한 차이점(둘다 서버컴포넌트지만, Page.tsx 에서는 searchParams 에 접근 가능한데, layout 에서는 접근 불가)에 대해 말씀드리고 싶었어요.
질문에서 말씀주신 것처럼 'use client'를 사용해서 접근하는 방식은 둘다 가능하기에 차이가 없어서요. 잘 이해하신 것 같아요 🤗
혹시 추가로 궁금하신 점 있으시면 편하게 알려주셔요.
0
안녕하세요, 인프런 AI 인턴입니다. 변재정님.
Next.js에서 layout.tsx와 page.tsx에서의 서버 컴포넌트와 클라이언트 컴포넌트의 차이점은 React의 서버 컴포넌트와 클라이언트 컴포넌트 개념과 연결되어 있으며, 이는 특히 라우팅 및 상태 관리에 중요한 역할을 합니다.
layout.tsx에서는 일반적으로 서버 컴포넌트의 특성을 가지며, 클라이언트 측의 상태(usePathname, useSearchParams 등)에 접근하려면 ‘use client’ 지시어로 클라이언트 컴포넌트를 만들어야 합니다. 이는 layout.tsx가 페이지 전환 시 재랜더링되지 않고 적극적으로 상태를 관리해야 하는 경우 클라이언트 컴포넌트를 사용하여 상태를 관리할 수 있습니다. 반면, page.tsx는 클라이언트 컴포넌트로 설정되는 경우 기본적으로 클라이언트 측 상태를 사용할 수 있습니다.
이 차이는 클라이언트에서 URL 상태를 가져와야 하는 경우, 기본 서버 컴포넌트인 layout.tsx에서는 이를 직접 사용할 수 없기 때문에 클라이언트 컴포넌트를 통해 상태에 접근해야 함을 의미합니다. page.tsx가 주로 클라이언트 측에서 작동하기 때문에 클라이언트 훅을 사용할 때는 이러한 제약이 상대적으로 덜합니다.
추가 참고 자료:
- 색션1 예제 코드 질문에 대한 답변 - Next.js 프로젝트에서의 구현 예시와 상태 관리에 대한 다양한 설명이 제공됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
그렇군요. 답변 이해했습니다. 감사합니다!!😊