상호작용이 필요한 파일에만 use client 경계를 둡니다.
파일 첫 줄의 use client는 해당 모듈과 하위 import를 클라이언트 그래프로 만듭니다. state, 이벤트, 브라우저 API가 필요한 가장 작은 경계에 둡니다.
Server Component는 Client Component를 렌더할 수 있고 props는 직렬화 가능한 값이어야 합니다.
서버 함수나 DB 연결 객체를 일반 props로 넘길 수 없습니다.
layout 최상단을 Client Component로 만들면 많은 하위 코드가 브라우저 번들에 포함됩니다.
로컬 프로젝트에서 확인해보세요감소 버튼을 추가하고 0 미만을 막으세요.
"use client";
import { useState } from "react";
export default function Page() {
const [count, setCount] = useState(0);
return (
<main>
<h1>완료 {count}개</h1>
<button onClick={() => setCount((v) => v + 1)}>완료 추가</button>
</main>
);
}