[Next.js] 클라이언트 컴포넌트 (공식 문서 따라가기)

1. Client Component란 무엇인가?
   Client Component는 서버에서 미리 렌더링된 HTML과 브라우저에서 실행되는 JavaScript를 결합하여 인터랙티브한 사용자 인터페이스를 제공하는 컴포넌트이다.
   이를 통해 사용자는 페이지 로드 시 즉시 콘텐츠를 확인할 수 있으며, 이후 JavaScript가 로드되면서 상호작용이 가능한 상태로 전환된다.
   
   
2. 클라이언트 렌더링의 장점
   1. 상호작용성
      Client Component는 상태 관리, 효과 처리, 이벤트 리스너 등을 활용하여 사용자와의 즉각적인 상호작용을 지원한다.
      이를 통해 버튼 클릭, 폼 입력 등 사용자 행동에 실시간으로 반응하는 동적인 UI를 구현할 수 있다.
   2. 브라우저 API 접근
      Client Component는 지리적 위치 정보나 로컬 스토리지와 같은 브라우저 전용 API에 접근할 수 있다.
      이를 통해 사용자 환경에 맞는 맞춤형 기능을 제공할 수 있다.
      
      
3. Next.js에서 클라이언트 컴포넌트 사용하기
   클라이언트 컴포넌트를 정의하려면, 해당 파일의 최상단에 'use client' 지시어를 추가해야 한다.
   이 지시어는 해당 모듈과 그 내부에서 임포트된 모든 모듈, 즉 하위 컴포넌트들이 클라이언트 번들의 일부로 간주되도록 한다.
   
   
4. 여러 개의 'use client' 엔트리 포인트 정의하기
   애플리케이션의 컴포넌트 트리에서 여러 위치에 'use client' 지시어를 추가하여, 각기 다른 부분을 독립적인 클라이언트 번들로 분리할 수 있다.
   이를 통해 특정 기능이나 페이지를 별도의 클라이언트 번들로 분리하여 로딩 성능을 최적화할 수 있다.
   한 번 'use client'를 선언하면 그 하위의 모든 컴포넌트와 모듈이 클라이언트에서 실행되므로, 모든 컴포넌트마다 개별적으로 'use client'를 선언할 필요는 없다.
   
   
5. Client Component의 렌더링 방식
   Next.js에서 클라이언트 컴포넌트는 전체 페이지 로드인지, 후속 탐색인지에 따라 렌더링 방식이 달라진다.
   1. 전체 페이지 로드 시
      초기 페이지 로드를 최적화하기 위해, Next.js는 React의 API를 사용하여 클라이언트와 서버 컴포넌트 모두를 서버에서 정적 HTML로 렌더링한다. 이를 통해 사용자는 페이지에 접속하자마자 콘텐츠를 볼 수 있다.
   2. 후속 탐색 시
      후속 탐색에서는 클라이언트 컴포넌트가 서버에서 렌더링된 HTML 없이 전적으로 클라이언트 측에서 렌더링된다. 클라이언트 컴포넌트의 JavaScript 번들이 다운로드되고 파싱되며, 준비가 되면 React는 RSC 페이로드를 사용하여 클라이언트와 서버 컴포넌트 트리를 재조정하고 DOM을 업데이트한다.
6. 서버 환경으로 돌아가기
   클라이언트 컴포넌트에서 'use client' 지시어를 선언한 후에도, 다음과 같은 상황에서는 서버 환경으로 돌아가야 할 수 있다:
   1. 클라이언트 번들 크기를 줄이기 위해
   2. 서버에서 데이터를 가져오기 위해
   3. 서버에서만 사용할 수 있는 API를 활용하기 위해
   이러한 경우, 클라이언트 컴포넌트 내부에 서버 컴포넌트나 서버 액션을 중첩하여 사용할 수 있다.
   이를 통해 클라이언트 컴포넌트 내에서도 서버 측 코드를 유지할 수 있다. 자세한 내용은 Composition Patterns 페이지를 참고하기 바란다.

 

참고한 문서

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