Using Client Components

이 서브앱은 use client를 실제 파일 경계에 두고 상호작용을 활성화하는 기본 패턴을 보여줍니다.

파일 구조

using-client-components/
├── page.tsx
└── demo/
    ├── page.tsx              ← Server Component
    └── ui/
        └── counter.tsx       ← 'use client'

핵심 파일 코드

// demo/ui/counter.tsx
'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Click me</button>
}

데모 실행 →← 스터디로 돌아가기