next 14로 프로젝트를 진행중인데,
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.
와 같은 오류가 발생되었다.
useState와 같은 React훅의 경우 클라이언트 컴포넌트에서만 사용할 수 있다고 한다.
그런데, 이걸 사용하는 곳이 서버 컴포넌트인지, 클라이언트컴포넌트인지 판단을 할 수가 없기 때문에.
컴포넌트 파일 최상단에서 "use client"를 추가해서 이 컴포넌트가 클라이언트 컴포넌트임을 지정해줘야 한다.
여기서 의문이 생겼다.
그럼 컴포넌트들 다 추가해줘야해?! 정답부터 말하면 NO!
만약 한 페이지에 컴포넌트가 여럿이고
각각의 컴포넌트에서 React Hook을 쓴다면, 여러 컴포넌트에 입력해줘야 할까?
다행히 그렇지 않았다.
그래서 컴포넌트파일 최상단에서 추가하면 된다고 해서
해당 컴포넌트를 사용하는 최상단 파일에 추가해주니
그곳에서 호출하는 컴포넌트들도 사용이 가능하다 :)
결론은, 클라이언트 컴포넌트를 호출하는 곳에서 선언해주면
그곳에서 호출하는 컴포넌트들이 모두 클라이언트 컴포넌트로 익식해서 적용된다.