Inflearn brand logo image

인프런 커뮤니티 질문&답변

호기쿤님의 프로필 이미지
호기쿤

작성한 질문수

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

Git Repository 생성 및 초기 설정 진행

ThemeProvider에 대해 질문드리겠습니다.

해결된 질문

작성

·

226

2

컴포넌트 클라이언트인 ThemeProvider를 최상위 layout의 children을 감싸면 정적인 서버 컴포넌트를 더 이상 활용할 수 없는 제약이 생기지 않나요?? nextjs에서 지향하는 방법인지 잘 모르겠습니다. 이렇게 사용해도 되는것인가요? 아니면 단순 빠른 예제실습을 위해 그렇게 하신건가요?

답변 2

0

안녕하세요, 인프런 AI 인턴입니다. 호기쿤님!

ThemeProvider를 최상위 layout에서 children을 감싸는 경우, 해당 하위 컴포넌트들은 모두 클라이언트 컴포넌트로 동작하게 됩니다. 이것은 Next.js의 서버 컴포넌트와 상호작용하는 방식과 약간 다를 수 있습니다.

일반적으로 Next.js에서는 서버 컴포넌트를 전략적으로 사용하여 페이지 로딩 속도를 향상시키는 것을 추천하지만, 프로젝트나 구현 부분에 따라 클라이언트 컴포넌트를 사용하는 것이 필요할 수 있습니다. 예를 들어, 전역 상태 관리나 테마 설정을 위해 전체를 감싸는 경우가 그렇습니다.

구체적인 사용 방법이나 전략은 프로젝트 요구사항에 따라 다르게 적용될 수 있으며, 강의에서 제공하는 방식이 하나의 예시일 수도 있습니다. 따라서 필요에 따라 서버 컴포넌트와 클라이언트 컴포넌트를 균형 있게 사용하시면 됩니다. 관련 내용을 추가로 확인하려면 아래 링크를 참고하세요:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

-1

로펀님의 프로필 이미지
로펀
지식공유자

안녕하세요 호기쿤님! 답변이 많이 지연된 점 죄송합니다. 결혼준비로 인해 장시간 신경을 쓰지 못하고 있었는데 이제 제대로 업무를 진행할 수 있게 되었습니다 🙏

질문주신 내용에 대해 답변을 드리자면, 말씀주신 부분이 맞습니다. 빠른 예제 실습을 위해 해당 방식으로 진행을 하였는데 layout은 nextjs에서 지향하는대로 서버 컴포넌트를 사용하고 별도의 client provider를 모아놓은 custom provider를 별도로 구성하여 감싸주는 형태가 바람직합니다.

nextjs를 심도있게 다루는 강좌가 아니다보니 최대한 실수가 나지 않을만한 코드들로 강의를 제작하였는데 다시 생각해보니 더 질 좋은 코드를 하나라도 더 알려드리는게 더 맞는 방향이었던 것 같네요 ㅎㅎ

다음에는 더 좋은 강의로 찾아뵙겠습니다. 혹시라도 추가적인 질문이 있으시다면 슬랙이나 게시판을 통해서 문의 부탁드립니다. 새해 복 많이 받으시길 바랍니다 호기쿤님!

 

[아래 링크 참고]

https://stackoverflow.com/questions/76939613/concern-regarding-nextjs-provider-as-a-client-component

호기쿤님의 프로필 이미지
호기쿤

작성한 질문수

질문하기