[Next.JS] 클라이언트 컴포넌트

Simon·2024년 5월 22일

next.js

클라이언트 컴포넌트

클라이언트 컴포넌트를 사용하면 서버에 미리 렌더링된 대화형 UI를 작성할 수 있고 클라이언트 JavaScript를 사용하여 브라워저에서 실행할 수 있다.

클라이언트 컴포넌트의 작동 방식, 렌더링 방식, 사용 시기에 대해서 글을 작성해보겠다.

클라이언트 렌더링의 이점

상호작용: 클라이언트 컴포넌트는 상태(state), 효과(effects) 및 이벤트 리스너를 사용할 수 있다.
브라우저 APIs: geolocation 또는 localStoreage 같은 브라우저 API에 접근할 수 있다.

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

클라이언트 컴포넌트를 사용하려면 파일 상단 import 위에 React "use client" 지시어를 추가하면 된다.

"use client"는 서버와 클라이언트 컴포넌트 모듈 간의 경계를 선언하는 데 사용된다. 즉, 파일에 "use client"를 추가 함으로써 하위 컴포넌트를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들(bundle)의 일부로 간주된다.

예시 코드

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

아래의 다이어그램은 "use client" 지시문이 정의되지 않은 경우 중첩된 컴포넌트(toggle.js)에서 onClick 및 useState를 사용하면 오류가 발생하는 것을 보여준다. 이것은 기본적으로 App Router의 모든 컴포넌트가 API를 사용할 수 없는 서버 컴포넌트이기 때문이다. Toggle.js에서 "use client" 지시문을 정의하면 리액트에게 API를 사용할 수 있는 클라이언트 경계에 들어가도록 지시할 수 있다.

다중 사용 use clinet 진입점 정의
리액트 컴포넌트 트리에서 여러 "use client" 진입정을 정의할 수 있다. 하지만 클라이언트에서 렌더링해야 하는 모든 컴포넌트에 정의할 필요는 없다. 한번 정의하면 모든 하위 컴포넌트와 모듈이 클라이언트 번들의 일부로 간주된다.

클라이언트 컴포넌트의 렌더링 방식

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

전체 페이드 로드

초기 페이지 로드를 최적화하기 위해 Next.js는 React의 API를 사용하여 클라이언트 및 서버 컴포넌트 모두에 대해 서버에서 HTML 미리보기를 렌더링한다. 즉, 사용자가 기다릴 필요 없이 즉시 페이지의 콘텐츠를 볼 수 있다.

서버

React는 클라이언트 컴포넌트에 대한 참조를 포함하는 RSC 페이로드라는 특수 데이터 형식으로 서버 컴포넌트를 렌더링
Next.js는 RSC 페이로드 및 클라이언트 컴포넌트 JavaScript 지침을 사용하여 서버의 경로에 대한 HTML을 렌더링

클라이언트

HTML은 경로의 빠른 비대화형(non-interactive) 초기 미리보기를 즉시 표시하는 데 사용
React 서버 컴포넌트 페이로드는 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트하는 데 사용
JavaScript 지침(JavaScript instructions)은 클라이언트 컴포넌트를 하이드레이션하고 해당 UI를 대화형으로 만드는 데 사용

하이드레션(hydration)이란?
이벤트 리스너를 DOM에 연결하여 정적 HTML을 대화형으로 만드는 과정