ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
15
작성한 질문수 2
next-themes 문서를 읽어보고 다른 분들 사용방법을 읽어봤는데, 따로 NextThemeProvier를 생성하지 않고 next-themes의 ThemeProvider를 layout.tsx에 바로 적용하는데 강의에서는 따로 provider를 생성해서 적용하고 있습니다.
혹시 유지보수를 좀 더 원활하게 하기 위함일까요?
답변 1
0
안녕하세요!
next-themes의 ThemeProvider는 React Context API와 브라우저 API를 사용하므로 클라이언트 컴포넌트에서만 동작합니다.
반면, Next.js App Router의 layout.tsx는 서버 컴포넌트로 유지하는 것이 권장됩니다. layout.tsx에 직접 'use client'를 선언하면 하위의 모든 페이지와 컴포넌트가 클라이언트 경계(Client Boundary)에 포함되어 서버 컴포넌트의 장점을 잃게 되기 때문입니다.
따라서 별도의 Wrapper 컴포넌트(예: NextThemeProvider)를 생성하여 상단에 'use client'를 붙여주고, layout.tsx에서는 이를 불러와 감싸는 방식으로 서버/클라이언트 컴포넌트 경계를 명확히 분리해 주는 것입니다.
학습에 도움이 되셨기를 바랍니다. 추가로 궁금한 점이 있으시면 편하게 질문해 주세요!
강의 자료 접근 불가
0
4
0
슬라이드 오타
0
8
0
결제기능까지 알려주실수있나요?
1
17
2
mission 09-01 을 수행할 수 없어요
0
26
1
스니펫이 이상해요
0
32
2
모든 컴포넌트를 클라이언트 컴포넌트로 했을 때
0
36
3
쿠키 생성 관련
0
86
3
JWT auth error invalid token
0
80
2
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
80
1
lucide react 아이콘 설치
0
104
2
02-04 layout.tsx 구조가 달라요
0
116
2
10-6 실습 할 수 없습니다..
0
129
1
그림 예제는 따로 제공이 안되나요?
0
108
1
cacheLife에 대한 질문입니다
0
102
1
(제보) 쿠키를 브라우저 개발 환경에서 직접 삽입했을 때 나오지 않는 현상
0
114
2
디스코드 채널 초대 링크
0
147
1
revalidatePath 질문 있습니다.
0
108
2
MainLayout이 중첩되어 뜨는 문제
0
110
2
쿠키와 헤더
0
90
2
구지 react를 사용하는 이유가 그럼 있는가?
0
123
1
FormEvent가 deprecated 되었다고 합니다.
0
502
2
터보백이 안보입니다
0
99
2
젯브레인 웹스톰(jetbrains webstorm) 사용하시는 분들 참고
0
169
2
소스 코드 다운로드는 어디서 하나요.
0
121
2