오류 메시지 해결 | You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client"

 

 

./components/header.tsx
ReactServerComponentsError:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/hanseul/Desktop/portfolio/portfolio/node_modules/framer-motion/dist/es/animation/hooks/use-animated-state.mjs:1:1]
 1 │ import { useState, useEffect } from 'react';
   ·                    ─────────
 2 │ import { useConstant } from '../../utils/use-constant.mjs';
 3 │ import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs';
 4 │ import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
   ╰────

The error was caused by importing 'framer-motion/dist/es/index.mjs' in './components/header.tsx'.

Maybe one of these should be marked as a client entry with "use client":
  ./components/header.tsx
  ./app/layout.tsx

 

 

https://stackoverflow.com/questions/74965849/youre-importing-a-component-that-needs-usestate-it-only-works-in-a-client-comp

You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "

 

 

 

챗GPT와 몇 시간 넘게 씨름하다가 해결하지 못해... 모듈도 지웠다 깔고 

난리를 쳤는데...

 

결국 해답을 찾아냈다.

 

 

"use client" 

"use client" 주석을 추가하면 Next.js는 해당 컴포넌트를 클라이언트 측에서 실행하도록 컴파일하고 필요한 클라이언트 측 라이브러리와 로직을 생성한다. 이렇게 하면 서버와 클라이언트 간의 로직을 분리하고 효율적인 렌더링을 달성할 수 있습니다.

 

라고 챗gpt가 알려줬다. 여기서 궁금증이 생겼다.

 

서버측과 클라이언트측 컴파일의 차이점이 뭐길래??

 

 

 

서버 측과 클라이언트 측 컴파일은 렌더링 컨텍스트에 따라 다르게 동작한다.

서버 측 컴파일(Server-Side Compilation): 

서버 측 컴파일은 웹 서버에서 페이지의 초기 렌더링을 수행할 때 사용된다. 서버에서 실행되며 렌더링 결과는 HTML로 클라이언트에 전송됩니다. 이 HTML은 초기 페이지 로드 시 클라이언트 브라우저에 표시된다. 서버 측 컴파일은 초기 렌더링 성능을 향상시키고 검색 엔진 최적화(SEO)를 개선하는 데 도움이 된다.

클라이언트 측 컴파일(Client-Side Compilation): 

클라이언트 측 컴파일은 서버로부터 전달받은 초기 HTML 페이지를 기반으로 웹 애플리케이션을 브라우저에서 완성하는 작업을 수행한다. 이것은 브라우저에서 JavaScript를 사용하여 페이지를 동적으로 업데이트하고 상호 작용을 처리하는 데 사용된다. 클라이언트 측 컴파일은 SPA(Single Page Application) 및 현대적인 웹 애플리케이션에서 일반적으로 사용된다.

 

 

 

초기값은 서버 측 컴파일(Server-Side Compilation)이며, 

"use client" 주석을 사용하여 클라이언트 측 컴파일(Client-Side Compilation)로 변경할 수 있다.