Next.js
서버와 클라이언트 컴포넌트 구분하기
서버의 데이터 작업과 브라우저의 상호작용을 실행 환경에 맞게 배치합니다.
이럴 때 필요해요
목록 조회와 예매 버튼의 상태를 어디에 둘지 구분합니다.
어떻게 동작하나요?
App Router의 페이지와 레이아웃은 기본적으로 서버 컴포넌트입니다. 서버에서 데이터를 읽고 화면 구성을 반환할 수 있습니다. 브라우저의 window 같은 API는 사용할 수 없습니다.
클릭 이벤트나 useState가 필요한 조각에는 "use client" 경계를 둡니다. 아래 버튼이 그 예입니다. 서버 페이지에서 이 버튼을 import해 함께 표시할 수 있습니다.
클라이언트 컴포넌트도 첫 로딩의 서버 HTML 생성에 참여할 수 있습니다. "use client"를 브라우저에서만 실행된다는 뜻으로 외우지 마세요. 서버 전용 비밀 값은 클라이언트 코드나 props로 보내지 않습니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
// app/ui/reserve-button.tsx
"use client";
import { useState } from "react";
export default function ReserveButton() {
const [selected, setSelected] = useState(false);
return <button onClick={() => setSelected(!selected)}>{selected ? "선택됨" : "선택"}</button>;
}브라우저 상호작용을 담당할 클라이언트 경계의 버튼 예제입니다.
자주 헷갈리는 포인트
- 클라이언트 컴포넌트가 초기 서버 렌더링에 참여하지 않는다고 단정하지 않습니다.
- 환경 변수 이름만으로 비밀 값이 안전하다고 판단하지 말고 전달 경계를 확인합니다.
내 말로 설명해 보기
서버에서 읽은 비밀 키를 버튼 props로 보내도 될까요?
생각할 단서 props가 서버 안에만 남는 정보인지 브라우저로 전달되는 데이터인지 확인하세요.
예시 답변 확인
설명에 들어갈 핵심
- 서버의 데이터 작업과 브라우저의 상호작용을 실행 환경에 맞게 배치합니다.
- 브라우저 상호작용을 담당할 클라이언트 경계의 버튼 예제입니다.
예시 답변
안 됩니다. 클라이언트로 보내는 props는 사용자에게 전달되는 데이터입니다. 비밀 작업은 서버 경계 안에서 처리합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.