Next.js 서버 액션 완벽 가이드

Next.js의 서버 액션은 클라이언트 컴포넌트에서 서버 사이드 코드를 직접 호출할 수 있는 강력한 기능입니다. 이 글에서는 서버 액션을 사용하여 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 방법을 살펴보겠습니다.

서버 액션이란?

서버 액션은 React의 use server 지시문을 사용하여 서버에서 실행될 함수를 선언하는 방식입니다. 이를 통해 클라이언트 컴포넌트에서 서버 기능을 직접 호출할 수 있으며, 데이터베이스 쿼리, 인증, 파일 처리 등의 작업을 안전하게 수행할 수 있습니다.

주요 이점

1. 향상된 보안: 민감한 로직과 데이터는 서버에서만 실행되므로 클라이언트 측에 노출되지 않습니다.
2. 단순화된 데이터 가져오기: 별도의 API 엔드포인트를 생성할 필요 없이 직접 서버 함수를 호출할 수 있습니다.
3. 점진적 향상: JavaScript가 비활성화된 환경에서도 작동할 수 있는 폼 제출과 같은 기본 기능을 제공합니다.

기본 사용법

서버 액션을 사용하는 가장 기본적인 방법은 다음과 같습니다:

'use server';

export async function addTodo(formData: FormData) {
  const title = formData.get('title');
  // 데이터베이스에 저장
  await prisma.todo.create({
    data: {
      title,
      completed: false,
    },
  });
}

이 함수는 클라이언트 컴포넌트에서 다음과 같이 사용할 수 있습니다:

import { addTodo } from '@/actions';

export default function TodoForm() {
  return (
    <form action={addTodo}>
      <input name="title" placeholder="할 일을 입력하세요" />
      <button type="submit">추가</button>
    </form>
  );
}