강의 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에서 클라이언트와 서버의 컴포넌트가 어떻게 처리되는지에 대해 잘 설명하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
55
2
@/styles/globals.css'
0
51
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
85
2
모달 관련 질문
0
88
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
96
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
107
2
npx prisma db push 시 에러가 뜹니다.
0
132
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
119
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
112
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
131
1