Client Component

~20 min · use client, interactivity, hooks

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Browser 가 필요할 때

State, event, ref, browser API, third-party UI lib (Framer Motion, headless UI, React Hook Form). 이런 거 위해 file 맨 위에 'use client' 박아 Client Component 선언.

Directive 가 전염성

'use client' 가 file 과 그 import 다 적용. Directive 아래 import graph 에 있는 거 다 client bundle 일부. Tree 에서 가능한 한 낮게 둬.

판단 표

필요	위치
`useState` / `useEffect` / `useRef`	Client
Event handler (`onClick`, `onChange`, `onSubmit`)	Client
`window`, `document`, `localStorage`	Client
Third-party hook-based library	Client
Data 그냥 render	Server
Data fetching / DB query	Server
Secret read	Server
Heavy data shaping	Server

Code

최소 Client Component·tsx

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

export function Counter({ initial = 0 }: { initial?: number }) {
  const [count, setCount] = useState(initial);
  return (
    <button
      onClick={() => setCount(c => c + 1)}
      className="rounded bg-blue-600 px-3 py-1 text-white"
    >
      {count}
    </button>
  );
}

Server parent 가 client leaf render·tsx

// app/page.tsx — Server Component
import { Counter } from '@/components/Counter';

export default async function Page() {
  const initial = await fetch('https://api.example.com/count').then(r => r.json());
  return <Counter initial={initial.value} />;
}

External links

Client Components

Exercise

App 에서 server-renderable subtree 를 wrap 하는 Client Component 찾아. 'use client' 를 진짜 interactivity 필요한 가장 작은 leaf 로 내려 박고, 주변 node 가 client bundle 에서 빠지는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← Previous왜 Server Component?Next →판단 framework

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.