클라이언트 컴포넌트

클라이언트 컴포넌트를 사용하면 요청 시간에 클라이언트에서 렌더링 될 수 있는 대화형 UI를 작성할 수 있습니다. Next.js에서 클라이언트 렌더링은 선택적이므로 리액트가 클라이언트에서 렌더링해야 할 컴포넌트를 명시적으로 결정해야 합니다.

이 페이지에서는 클라이언트 컴포넌트가 어떻게 작동하는지, 어떻게 렌더링되는지, 그리고 언제 사용할 수 있는지에 대해 다룹니다.

클라이언트 렌더링의 이점

클라이언트에서 렌더링 작업을 수행함으로써 얻을 수 있는 몇 가지 이점이 있습니다.

1. 상호작용성: 클라이언트 컴포넌트는 상태, 효과, 이벤트 리스너를 사용할 수 있으므로 사용자에게 즉각적인 피드백을 제공하고 UI를 업데이트 할 수 있습니다.
2. 브라우저 API: 클라이언트 컴포넌트는 geolocation이나 localStorage와 같은 브라우저 API에 접근할 수 있어 특정한 사용 사례에 대한 UI를 구축할 수 있습니다.

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

클라이언트 컴포넌트를 사용하려면, 파일의 상단에 임포트 위에 리액트 use client 지시문을 추가할 수 있습니다.

"use client"는 서버와 클라이언트 컴포넌트 모듈 사이의 경계를 선언하는 데 사용됩니다. 이것은 파일에 use client를 정의함으로써 그 파일로 가져온 모든 다른 모듈들, 하위 컴포넌트를 포함하여, 클라이언트 번들의 일부로 간주되며 클라이언트에서 리액트에 의해 렌더링된다는 것을 의미합니다.

'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>
  )
}

아래 다이어그램은 중첩된 컴포넌트를 보여주며, toggle.js에서 onClick과 useState를 사용하면 "use client" 지시문이 정의되지 않은 경우 오류가 발생합니다. 이는 기본적으로 이러한 API들이 사용 가능하지 않은 서버에서 컴포넌트가 렌더링되기 때문입니다. toggle.js에 "use client" 지시문을 정의함으로써 해당 컴포넌트와 그 하위 컴포넌트들을 클라이언트에서 렌더링하도록 리액트에 지시할 수 있습니다.

클라이언트 컴포넌트는 어떻게 렌더링됩니까?

Next.js에서 클라이언트 컴포넌트는 요청이 전체 페이지 로드의 일부인지(애플리케이션에 처음 방문하거나 브라우저 새로고침으로 인한 페이지 재로드) 아니면 후속 탐색의 일부인지에 따라 다르게 렌더링됩니다.

전체 페이지 로드

초기 페이지 로드를 최적화하기 위해 Next.js는 클라이언트와 서버 컴포넌트 모두에 대해 서버에서 정적 HTML 미리보기를 렌더링하기 위해 리액트의 API를 사용합니다. 즉, 사용자가 애플리케이션을 처음 방문하면 클라이언트 컴포넌트 자바스크립트 번들을 다운로드, 분석, 실행하는 것을 기다릴 필요 없이 페이지의 내용을 즉시 볼 수 있습니다.

서버에서 동작입니다.

1. 리액트는 클라이언트 컴포넌트에 대한 참조가 포함된 리액트 서버 컴포넌트 페이로드 (RSC Payload)라는 특별한 데이터 형식으로 서버 컴포넌트를 렌더링합니다.
2. Next.js는 RSC 페이로드와 클라이언트 컴포넌트 자바스크립트 지침을 사용하여 서버에서 라우트의 HTML을 렌더링합니다.

그 후, 클라이언트에서 동작 순서입니다.

1. HTML은 라우트의 빠른 비대화형 초기 미리보기를 즉시 표시하는 데 사용됩니다.
2. 리액트 서버 컴포넌트 페이로드는 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트하는 데 사용됩니다.
3. 자바스크립트 지침은 클라이언트 컴포넌트를 활성화하고 UI를 대화형으로 만드는 데 사용됩니다.

후속 탐색

후속 탐색에서는 클라이언트 컴포넌트가 서버 렌더링 HTML 없이 완전히 클라이언트에서 렌더링됩니다. 이는 클라이언트 컴포넌트 자바스크립트 번들이 다운로드되고 파싱됨을 의미합니다. 번들이 준비되면 리액트는 RSC 페이로드를 사용하여 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트합니다.

서버 환경으로 돌아가기

때로는 use client 경계를 선언한 후에 서버 환경으로 돌아가고 싶을 수 있습니다. 예를 들어, 클라이언트 번들 크기를 줄이거나 서버에서 데이터를 가져오거나 서버에서만 사용 가능한 API를 사용하려고 할 수 있습니다.

실례적으로 클라이언트 컴포넌트 내부에 중첩되어 있는 것처럼 보이는 코드를 서버에 유지하려면 클라이언트 및 서버 컴포넌트와 서버 액션을 교차하여 사용할 수 있습니다. 자세한 내용은 조합 패턴 페이지를 참조하세요.