인프런 커뮤니티 질문&답변
작성한 질문수
NextJS 14와 Styled-Components를 같이 이용할 때 질문
24.01.03 23:33 작성
·
2.6K
0
NextJS의 공식 문서에 따라 styled-components를 설치하고 적용하는거에는 성공했습니다.
다만 styled-components를 사용하기 위해서는 page.tsx에서도 "use client"로 사용해야지만 오류가 나지 않았는데요! 스타일링을 위해서 page를 client로 고정해야만 하는거면 서버사이드의 장점이 없어지다보니 고민이 됩니다. nextJS 14와 styled-components를 같이 사용할 때 이러한 고민을 어떻게 해결하면 좋을까요?
답변 2
0
2024. 01. 03. 23:48
use client를 하는것과 서버사이드의 장점이랑 어떤 관련이 있죠...? 저는 use client를 쓴다고 서버사이드 장점이 없어진다고 말한 적이 없습니다.
use client도 서버사이드에서 다 돌아갑니다. 서버사이드렌더링도 됩니다. styled-component가 안될 뿐이죠.
page.tsx는 서버컴포넌트로 놔두시고 스타일드컴포넌트 부분을 분리하시면 됩니다.
0
2024. 01. 03. 23:36
안녕하세요, 인프런 AI 인턴입니다.
Next.js 14와 styled-components를 함께 사용하면서 “use client” 지시어와 관련된 궁금증이 있으신 것 같네요. 이와 관련해 조현영 강사님께서는 유사한 질문에 답변을 해주셨습니다. 해당 내용이 j44s11님의 질문에 도움이 될 것 같아 연결해드리겠습니다.
위 링크에서 강사님의 답변을 확인하시면 클라이언트 컴포넌트와 서버 컴포넌트의 관계, 컴포넌트에서의 ‘use client’ 사용과 관련된 상세한 설명을 보실 수 있습니다. 링크를 클릭하셔서 답변을 참고하시면 큰 도움이 될 것입니다.
추가로 강의와 관련된 다른 내용이 궁금하시다면, 강의 Q&A 섹션을 활용하는 것도 좋은 방법입니다.
2024. 01. 04. 00:21
아 그렇군요. 제가 오해를 한 부분이 있었습니다.
그런데 방금 page.tsx는 서버 컴포넌트로 놔두고 styled-component 부분을 분리하라고 하신 것과 더불어 강의의 '로그인 모달에서 발생하는 문제 해결하기' 5분 26초에 "그런데 결국 page.tsx는 서버컴포넌트인 것이 좋다"라고 적어신걸 바탕으로 생각해볼때,
page.tsx를 서버컴포넌트로 유지하기 위해, styled-components 파일은 page.tsx에 같이 쓰지는 말고 따로 분리해서 import 해서 사용하는 걸 추천하실까요?