React 19에서 새롭게 도입된 Actions의 다양한 활용 예제를 살펴보세요.
서버에서 실행되는 Actions으로 데이터 변경 및 비즈니스 로직 처리
폼과 연동된 Actions으로 간편한 상태 관리와 검증
낙관적 업데이트로 즉각적인 UI 반응과 향상된 사용자 경험
// server action 정의 (server component 또는 별도 파일)
'use server'
async function createPost(formData: FormData) {
const title = formData.get('title') as string;
// 서버에서 데이터베이스 작업 수행
await db.post.create({ data: { title } });
revalidatePath('/posts'); // 관련 페이지 재검증
}
// client component에서 사용
function PostForm() {
return (
<form action={createPost}>
<input name="title" placeholder="제목 입력" />
<button type="submit">작성</button>
</form>
);
}