Server Component와 Client Component의 차이를 설명해주세요.

Server Component는 서버에서 렌더링되고 브라우저 번들에 포함되지 않는 컴포넌트이며, Client Component는 브라우저에서 실행되어 상태, 이벤트, 브라우저 API를 사용할 수 있는 컴포넌트입니다.

Server Component

App Router에서는 기본이 Server Component입니다. DB 조회, 파일 시스템 접근, 서버 전용 secret 사용이 가능하고 클라이언트 JS를 줄일 수 있습니다.

export default async function ProductList() {
  const products = await db.product.findMany();
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

Client Component

use client 지시어가 필요합니다. useState, useEffect, 클릭 이벤트, window 접근처럼 브라우저 기능이 필요할 때 사용합니다.

'use client';
import { useState } from 'react';

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? '♥' : '♡'}</button>;
}

경계와 주의점

Client Component가 import하는 하위 컴포넌트도 클라이언트 번들에 포함됩니다. 따라서 큰 UI 트리 전체에 use client를 붙이기보다 상호작용이 필요한 작은 부분만 클라이언트로 분리하는 것이 좋습니다.

Server에서 Client로 전달하는 props는 직렬화 가능해야 합니다. 함수, DB 연결 객체, class instance를 그대로 넘길 수 없습니다.

면접 답변 포인트

Server Component는 데이터 접근과 번들 최적화에 유리하고, Client Component는 상호작용에 필요합니다. 핵심은 서버를 기본으로 두고 필요한 leaf만 client로 좁히는 설계입니다.