[번역] 클라이언트 컴포넌트

원글 : https://nextjs.org/docs/app/building-your-application/rendering/client-components

클라이언트 컴포넌트는 요청 시 클라이언트에서 렌더링할 수 있는 인터랙티브한 UI를 만들 수 있게 해준다. Next.js에서 클라이언트 렌더링은 opt-in으로, 리액트가 클라이언트에서 렌더링해야 하는 컴포넌트를 명시적으로 결정해야 한다.

클라이언트 렌더링의 이점

• Interactivity : 클라이언트 컴포넌트는 state, effects, 그리고 이벤트 리스너를 사용할 수 있으므로, 유저에게 즉시적인 피드백을 제공할 수 있고 UI를 업데이트할 수 있다.
• 브라우저 APIs : 클라이언트 컴포넌트는 geolocation 혹은 localStorage 같은 브라우저 APIs에 액세스할 수 있으므로 특정 use cases에 대한 UI를 만들 수 있다.

Next.js에서 클라이언트 컴포넌트 사용

클라이언트 컴포넌트를 사용하기 위해서는, "use client" 를 파일의 맨 위에 추가해야 한다.

"use client" 는 서버와 클라이언트 컴포넌트 모듈 사이의 경계를 선언하는데 사용된다. 이는 파일에 “use client” 를 정의하면 하위 컴포넌트를 포함하여 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주되고, 클라이언트에서 React에 의해 렌더링됨을 의미한다.

어떻게 클라이언트 컴포넌트가 렌더링되는 가?

Next.js에서 클라이언트 컴포넌트는 요청이 전체 페이지 로드(애플리케이션에 대한 초기 방문 혹은 브라우저 새로고침으로 트리거된 페이지 reload)의 일부인지 또는 후속 navigation에 따라 다르게 렌더링된다.

전체 페이지 로드

초기 페이지 로드를 최적화 하기 위해, Next.js는 React의 APIs를 사용하여 클라이언트와 서버 컴포넌트 모두에 대해 서버에서 정적인 HTML 프리뷰를 렌더링한다. 이는 유저가 애플리케이션에 처음 방문했을 때, 클라이언트가 클라이언트 컴포넌트 자바스크립트 번들을 다운로드, parse 그리고 실행할 때까지 기다릴 필요 없이 페이지의 내용을 즉시 볼 수 있을 것이다.

hydration : 돔에 이벤트 리스너를 붙여 정적 HTML을 인터렉티브하게 만드는 과정이다.

후속 Navigations

후속 Navagations에서 클라이언트 컴포넌트는 서버에서 렌더링되는 HTML 없이 클라이언트에서 모두 렌더링된다.

이는 클라이언트 컴포넌트 자바스크립트 번들을 다운로드하여 parse한다. 번들이 준비되면, 리액트는 RSC Payload를 사용하여 클라이언트와 서버 컴포넌트 트리를 조화하고, 돔을 업데이트한다.