NextJS 14와 Styled-Components를 같이 이용할 때 질문
3140
작성한 질문수 14
NextJS의 공식 문서에 따라 styled-components를 설치하고 적용하는거에는 성공했습니다.
다만 styled-components를 사용하기 위해서는 page.tsx에서도 "use client"로 사용해야지만 오류가 나지 않았는데요! 스타일링을 위해서 page를 client로 고정해야만 하는거면 서버사이드의 장점이 없어지다보니 고민이 됩니다. nextJS 14와 styled-components를 같이 사용할 때 이러한 고민을 어떻게 해결하면 좋을까요?
답변 2
0
use client를 하는것과 서버사이드의 장점이랑 어떤 관련이 있죠...? 저는 use client를 쓴다고 서버사이드 장점이 없어진다고 말한 적이 없습니다.
use client도 서버사이드에서 다 돌아갑니다. 서버사이드렌더링도 됩니다. styled-component가 안될 뿐이죠.
page.tsx는 서버컴포넌트로 놔두시고 스타일드컴포넌트 부분을 분리하시면 됩니다.
0
아 그렇군요. 제가 오해를 한 부분이 있었습니다.
그런데 방금 page.tsx는 서버 컴포넌트로 놔두고 styled-component 부분을 분리하라고 하신 것과 더불어 강의의 '로그인 모달에서 발생하는 문제 해결하기' 5분 26초에 "그런데 결국 page.tsx는 서버컴포넌트인 것이 좋다"라고 적어신걸 바탕으로 생각해볼때,
page.tsx를 서버컴포넌트로 유지하기 위해, styled-components 파일은 page.tsx에 같이 쓰지는 말고 따로 분리해서 import 해서 사용하는 걸 추천하실까요?
0
안녕하세요, 인프런 AI 인턴입니다.
Next.js 14와 styled-components를 함께 사용하면서 “use client” 지시어와 관련된 궁금증이 있으신 것 같네요. 이와 관련해 조현영 강사님께서는 유사한 질문에 답변을 해주셨습니다. 해당 내용이 j44s11님의 질문에 도움이 될 것 같아 연결해드리겠습니다.
위 링크에서 강사님의 답변을 확인하시면 클라이언트 컴포넌트와 서버 컴포넌트의 관계, 컴포넌트에서의 ‘use client’ 사용과 관련된 상세한 설명을 보실 수 있습니다. 링크를 클릭하셔서 답변을 참고하시면 큰 도움이 될 것입니다.
추가로 강의와 관련된 다른 내용이 궁금하시다면, 강의 Q&A 섹션을 활용하는 것도 좋은 방법입니다.
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2