서버에서 클라이언트 경계로 전달 가능한 데이터 형태를 이해합니다.
Client Component props는 네트워크 경계를 건널 수 있는 형태여야 합니다. 화면에 필요한 최소 문자열, 숫자, boolean, 배열과 일반 객체로 변환합니다.
Date, ORM entity, Error처럼 의미가 손실될 수 있는 값은 명시적인 DTO로 변환합니다.
큰 원본 데이터를 모두 보내지 말고 서버에서 집계·필터한 결과만 전달합니다.
비밀 키나 내부 권한 정보를 props에 넣으면 브라우저에서 확인할 수 있습니다.
로컬 프로젝트에서 확인해보세요createdAt ISO 문자열을 한국어 날짜로 표시하세요.
"use client";
const serverDto = {
id: "course-1",
title: "Next.js",
createdAt: "2026-08-05T00:00:00.000Z",
};
export default function Page() {
return (
<main>
<h1>{serverDto.title}</h1>
<p>ID {serverDto.id}</p>
<time dateTime={serverDto.createdAt}>
{new Date(serverDto.createdAt).toLocaleDateString("ko-KR")}
</time>
</main>
);
}