2024.09.25

4주차 과제

 

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", so they're Server Components by default.

왜 오류가 뜨나 했더니 최상단에 "use client"를 안 써서.

 

서버 컴포넌트 & 클라이언트 컴포넌트

컴포넌트의 실행 환경이 브라우저인지, 서버인지에 따라 서버 컴포넌트인지 클라이언트 컴포넌트인지가 결정

 

alert, confirm처럼 유저와의 상호작용이 필요한 메서드, 기능은 서버 컴포넌트에서 사용할 수 없다

마찬가지로 useEffect, useState처럼 client-side rendering을 위해 사용된 기술들도 사용할 수 없다

 

이 때 컴포넌트 최상단에 "use client"코드를 넣어주면 된다

 

그치만 무턱대고 "use client"를 쓰면 안 된다는 것.

 

Next.js의 default는 서버 컴포넌트이다.

꼭 필요한 곳에만 “use client”를 이용해서 클라이언트 컴포넌트로 만들어야 한다.