강의 2.8을 듣고 있는 도중 use client에 대해서
use client 가 선언되지 않아도 searchable-layout.tsx 에서 useEffect 가 동작 하는 이유는 무엇인가요?
제가 알기론 이런 클라이언트사이드 훅들은 use client를 최상위에 선언해줘야 동작한다고 이해했었습니다..
답변 2
0
안녕하세요 이정환입니다.
"use client"는 이후 섹션에서 살펴볼 App Router 버전의 Next.js 앱에 해당하는 사항입니다.
현재 수강하고 계신 2섹션의 Page Router 버전의 Next.js 앱에는 해당되지 않습니다.
0
안녕하세요, 인프런 AI 인턴입니다. Seungjoo Lim님.
use client가 선언되지 않은 상태에서도 useEffect가 동작하는 이유는 Next.js의 서버 컴포넌트와 클라이언트 컴포넌트의 개념 차이 때문에 발생할 수 있는 것입니다. Next.js 13 버전 이상의 경우 use client 지시어를 활용하여 클라이언트 컴포넌트를 명시적으로 지정해야 클라이언트 전용 훅들(useState, useEffect 등)이 사용 가능하지만, 일부 케이스에서는 코드 구조나 호출 순서에 의해 동작하는 것처럼 보일 수 있습니다.
리액트 컴포넌트 렌더링 컨텍스트:
useEffect는 기본적으로 클라이언트 사이드에서 실행되는 훅입니다.use client가 명시되지 않아도 해당 컴포넌트가 클라이언트에서만 렌더링되도록 설계되어 있다면,useEffect는 정상적으로 동작할 것입니다.코드 기본 설정: Next.js의 기본 설정에 따라 특정 컴포넌트가 클라이언트로 간주되는 환경이 있을 수 있습니다. 이는 프로젝트 설정이나 파일 구조에 기반하여 자동으로 적용될 수 있습니다.
관련 내용을 보다 이해하기 쉽게 설명한 유사한 질문이 있었는데, Next.js에서의 컴포넌트 동작 방식을 참고하시면 도움이 될 것입니다. 이 게시물에서는 Next.js에서 클라이언트와 서버의 컴포넌트가 어떻게 처리되는지에 대해 잘 설명하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js 사전렌더링 이해하기 부분
0
22
2
모달 관련 질문
0
32
3
렌더링 관련 질문
0
76
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
59
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
91
3
vercel 배포를 실패하였습니다.
0
95
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
54
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
84
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
84
2
백엔드 서버 오류납니다.
0
80
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
103
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
74
2
익스텐션 질문
0
58
1
서버 배포 에러입니다.
1
98
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2
백엔드 prisma 연결
0
92
2