Skip to main content

Passing data from Server to Client Components

동적 URL의 게시글 id를 바꾸면 서버가 가져온 likes 값이 Client LikeButton 초기값으로 전달됩니다. URL을 직접 수정하며 props 전달을 확인해보세요.

파일 구조

passing-data-from-server-to-client-components/
├── page.tsx
└── demo/
    └── [id]/
        ├── page.tsx
        └── LikeButton.tsx

핵심 파일 코드

// page.tsx (Server)
const post = await getPost(id)
return <LikeButton likes={post.likes} />

// LikeButton.tsx (Client)
'use client'
const [count, setCount] = useState(likes)
← 스터디로 돌아가기