한 줄 요약 - 이제 React를 그냥 쓰기보다 Next.js 같은 메타프레임워크로 시작하는 게 표준이 됐고, 백엔드 로직까지 Server Actions로 프론트 저장소 안에서 다룹니다.
무슨 일이에요?
Server Actions는 서버에서 도는 함수를 폼 action에 직접 연결하는 방식입니다. 별도 API 라우트를 만들 필요 없이 폼 제출이 곧 서버 함수 호출이 됩니다.
핵심 코드
// app/actions.ts
'use server';
export async function createTodo(formData) {
const title = String(formData.get('title') ?? '');
await db.todo.create({ data: { title } });
}
<!-- 폼에서 바로 호출 (fetch/엔드포인트 불필요) -->
<form action={createTodo}>
<input name="title" />
<button>추가</button>
</form>
왜 중요해요?
- API 보일러플레이트가 줄고, 폼이 JS 없이도 동작하는 점진적 향상이 됩니다.
- 주의: 'use server' 함수는 신뢰 경계입니다. 입력 검증과 권한 체크를 반드시 직접 해야 합니다.
