클라이언트 컴포넌트와 서버 컴포넌트(그리고 use client)

오랜만에 Next.js 기반으로 개발을 해보려고 했는데 아래와 같은 에러가 발생했다.

아뿔싸! 내가 개발을 하지 않던 사이에 서버 컴포넌트가 세상을 점령했던 것이다.

기본적으로는 서버 컴포넌트라고 보면 된다.

이번 글에서는 'use client'가 뭔지 언제 사용해야 하는지 알아볼 예정이다.

 

use Client란?

use Client란, 해당 컴포넌트가 클라이언트 컴포넌트(Client Component)임을 나타내는 지시어(directive)이다.

클라이언트 컴포넌트란, 클라이언트에서 렌더링 되는 렌더 트리의 컴포넌트다.

=>사용자와 상호 작용을 할 수 있는 컴포넌트라는 뜻이다.

클라이언트 컴포넌트에 대해서 알아보았다.

 

Q. 사용자와 상호 작용이 어떤 것을 의미할까?

- useState, useEffect, useContext 등 리액트 훅을 사용해야 할 때

- onClick, onChange 등 각종 이벤트 핸들러를 사용해야 할 때

- 브라우저 API 사용할 때

- createContext, memo를 사용할 때

 

Q. 어떻게 사용해야 할까?

파일 가장 상단에 위치해야 한다.

백틱은 안 된다.

 

Q. 실행되는 위치는?

사용자의 브라우저에서 실행된다.

 

서버 컴포넌트와 함께 클라이언트 컴포넌트 사용하기

결국 Next.js를 이용한 개발을 할 때는 서버 컴포넌트와 클라이언트 컴포넌트를 함께 섞어 개발을 해야 한다.

 

서버 컴포넌트를 사용하는 경우

- 정적 콘텐츠, Data fetching, SEO

 

클라이언트 컴포넌트를 사용하는 경우

- 리액트 훅 사용할 때, 브라우저 API가 필요할 때

 

서버 컴포넌트이자 동시에 클라이언트 컴포넌트가 되는 상황이 있을 수도 있다.

트리의 부모가 클라이언트 컴포넌트일 경우에 자식은 클라이언트 컴포넌트가 된다.

단, 직접 모듈을 가져오거나 컴포넌트를 호출하는 경우에 속한다.