이 편에서 만드는 파일

개념 편입니다. 새로 만들거나 고치는 파일이 없습니다. 04편에서 헤더 컴포넌트를 만들 때 이 편의 기준으로 서버 컴포넌트와 클라이언트 컴포넌트를 나눕니다.

개념 정리

react_3와 다른 점 — “전부 클라이언트”에서 “필요한 곳만 클라이언트”로

react_3의 bookshelf는 모든 컴포넌트가 브라우저에서 실행됐습니다. 컴포넌트마다 서버냐 클라이언트냐를 고민할 필요가 없었습니다. Next.js App Router는 다릅니다. layout과 page를 포함해 모든 컴포넌트는 기본이 서버 컴포넌트이고, 상호작용이 필요한 부분만 파일 맨 위에 use client를 적어 예외로 선언합니다.

'use client'
 
import { useState } from 'react'
 
export default function LikeButton() {
  const [liked, setLiked] = useState(false)
  return <button onClick={() => setLiked(!liked)}>{liked ? '좋아요 취소' : '좋아요'}</button>
}

use client는 파일 맨 위, 어떤 import보다도 앞에 옵니다.

클라이언트 컴포넌트가 필요한 경우

서버 컴포넌트가 유리한 경우

use client가 만드는 경계

한 파일에 use client를 붙이면, 그 파일이 직접 import하는 것과 그 파일이 직접 렌더링하는 컴포넌트까지 클라이언트 번들에 포함됩니다. 반대로 서버 컴포넌트를 클라이언트 컴포넌트의 children으로 전달하면, 그 서버 컴포넌트는 서버에서 미리 렌더링된 결과만 전달되고 클라이언트 번들에 포함되지 않습니다. 그래서 되도록 use client는 상호작용이 필요한 가장 작은 단위(버튼 하나, 검색창 하나)에만 붙이고, 레이아웃 전체를 클라이언트 컴포넌트로 만들지 않습니다.

데이터가 흐르는 방향

서버 컴포넌트에서 클라이언트 컴포넌트로는 props로 값을 넘깁니다. 단, 넘기는 값은 함수나 클래스 인스턴스가 아니라 문자열·숫자·객체·배열처럼 직렬화할 수 있는 값이어야 합니다.

// 서버 컴포넌트
import RatingButton from './rating-button'
 
export default async function BookDetail({ bookId }) {
  const book = await getBook(bookId)
  return <RatingButton bookId={book.id} initialRating={book.rating} />
}

// 클라이언트 컴포넌트
'use client'
 
export default function RatingButton({ bookId, initialRating }) {
  // ...
}

클라이언트에서 서버로 값을 보내 데이터를 바꾸는 방법(Server Actions)은 09편에서 다룹니다. 지금은 서버에서 클라이언트로 가는 방향만 다룹니다.

판단 절차

컴포넌트를 새로 만들 때마다 다음 순서로 판단합니다.

1. 이 컴포넌트가 상태나 이벤트 핸들러, 브라우저 API가 필요한가. 아니라면 서버 컴포넌트로 그냥 둔다.
2. 필요하다면, 그 부분만 따로 떼어 작은 컴포넌트로 만들고 그 파일에만 use client를 붙인다.
3. 나머지 화면(데이터를 보여주기만 하는 부분)은 서버 컴포넌트로 남긴다.

직접 해보기

자주 하는 실수

확인 문제

참고 자료

• Next.js Docs — Server and Client Components