Event Handlers 데모
onClick 이벤트 핸들러에서 Server Action을 호출하고, useState로 결과를 UI에 반영합니다. Like 버튼을 클릭해보세요.
Total Likes: 42
핵심 코드
// _components/LikeButton.tsx
'use client'
import { incrementLike } from '../actions'
import { useState } from 'react'
export default function LikeButton({ initialLikes }) {
const [likes, setLikes] = useState(initialLikes)
return (
<>
<p>Total Likes: {likes}</p>
<button onClick={async () => {
const updatedLikes = await incrementLike()
setLikes(updatedLikes)
}}>
Like
</button>
</>
)
}