useEffect + Server Action 데모
useEffect 내에서 startTransition을 사용하여 컴포넌트 마운트 시 Server Action을 자동 호출합니다. 아래 ViewCounter 컴포넌트가 마운트되면서 조회수가 증가합니다.
Total Views: 1336
isPending: false
체험 포인트: 페이지가 로드되면 ViewCounter 컴포넌트가 마운트되면서 자동으로 incrementViews Server Action을 호출합니다. isPending이 true인 동안 "updating..."이 표시되다가 완료 후 조회수가 갱신됩니다. 페이지를 새로고침하면 조회수가 계속 증가합니다.
핵심 코드
// _components/ViewCounter.tsx
'use client'
import { incrementViews } from '../actions'
import { useState, useEffect, useTransition } from 'react'
export default function ViewCounter({ initialViews }) {
const [views, setViews] = useState(initialViews)
const [isPending, startTransition] = useTransition()
useEffect(() => {
startTransition(async () => {
const updatedViews = await incrementViews()
setViews(updatedViews)
})
}, [])
return <p>Total Views: {views}</p>
}