핵심 답변
📌 Server Component서버에서만 실행되는 컴포넌트. App Router의 기본값입니다.
데이터베이스, API 직접 접근 가능
번들 크기에 영향 없음 (클라이언트로 전송 안 됨)
useState, useEffect 사용 불가이벤트 핸들러, 브라우저 API 사용 불가
📌 Client Component클라이언트에서 실행되는 컴포넌트. 파일 상단에
"use client" 선언 필요.useState, useEffect 사용 가능클릭, 입력 등 사용자 상호작용 처리 가능
번들 크기에 포함됨
사용 기준
javascript
Server Component → 데이터 패칬, 정적 UI, SEO 중요한 콘텐츠 Client Component → 더트다운, 모달, 토글, 실시간 업데이트
예시 코드
typescript
// Server Component (선언 필요 없음)
async function ProductList() {
const products = await db.query('SELECT * FROM products');
return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}
// Client Component
'use client';
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}핵심 용어
📌 Hydration서버에서 렌더링된 HTML에 JavaScript를 붙여 상호작용 가능하게 만드는 과정입니다.