layout 컴포넌트 내 클라이언트 컴포넌트
안녕하세요~ 강의 내용 중 궁금한게 있는데요
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 프로젝트에서의 구현 예시와 상태 관리에 대한 다양한 설명이 제공됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
클로드코드 유료플랜 할인 방법이 있을까요?
0
15
0
제네릭 클래스 핸드북 페이지가 undefined라고 나옵니다.
0
7
1
API Error : 400 에러의 원인과 해결방법이 궁금합니다!!
0
16
2
퍼미션 권한 설정 문의
0
18
2
Next.js + Tanstack Query BFF 구조 질문
0
10
1
커서에서 shift+enter가 안됩니다.
0
19
2
template 동작 흐름에 대해서 질문 있습니다.
1
70
1
Link 컴포넌트는 그러면 웬만하면 무조건 쓰는편이 좋은가요?
0
82
2
middleware.ts가 proxy.ts로 변경되고 실행 시점도 바뀌었다네요
1
243
2
PPR을 보고 오라고 하시는데
1
82
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
59
1
강의에 언급된 영상 질문
0
70
2
next Request Memoization과 react cache
0
80
1
next.js 서버fetch 에러 fallback ui 구현 방법
0
197
2
필터옵션이 많은 페이지에서도 서버 fetch를 사용하는게 맞을까요??
0
88
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
82
1
template.tsx 에서 서버 fetch 후 클라이언트 컴포넌트로 넘겨주면 싱크가 맞는 이유
1
89
1
게시판 리스트 작성할 때 use client를 어디서부터 붙여야할지 모르겠어요
0
89
1
'왜 Next.js 가 필요할까?(기술적인 등장 배경)' 에서 언급하는 영상들이 무엇일까요?
0
149
2
Parallel Route를 사용한 모달에 대해 질문이 있어요.
0
112
2
유튜브 영상과의 차이점 문의
0
235
1
template.tsx 가 SEO 에 주는 이점에 대한 질문
0
104
2
자동화 스크립트 관련하여 질문있습니다.
0
109
2
색션1 예제 코드 질문드립니다.
0
208
1