[Learn Next.js] 서버 액션과 데이터 뮤테이션

서버 액션

서버 액션이란 별도의 API 엔드포인트 없이 서버 컴포넌트 자체에서 비동기 작업을 모두 수행하는 것을 의미합니다.

서버 액션을 구현하기 위해서는 최소한 다음과 같은 코드가 필요합니다.

export default function Page() {
  async function create(formData: FormData) {
    "use server";
    // 데이터 뮤테이션 로직
  }
  
  // 서버 액션을 트리거하는 양식
  return <form action={create}>...</form>;
}

 

위 코드를 분석해보면 다음과 같습니다.

• 서버 컴포넌트는 비동기 함수를 action으로 가지는 form 요소를 반환합니다.
• action으로 올 수 있는 함수는, FormData 타입의 데이터를 인자로 전달받는 비동기 함수입니다.
• 그리고 이 함수는 내부에서 "use server" 지시어와 함께 formData를 사용하여 데이터를 뮤테이션합니다.

참고할 점은 다음과 같습니다.

• HTML의 form 요소의 action 속성은 양식 데이터가 제출되어야 할 URL을 전달받습니다.
• 하지만, React의 form 요소의 action은 특별한 props이며, 서버 액션을 호출하는 비동기 함수를 전달받습니다.
• 서버 액션은 POST 요청이 전달되는 API 엔드포인트를 생성하므로 직접 별도의 API 엔드포인트를 생성하지 않아도 됩니다.

서버 액션을 사용하는 주요 패턴은 다음과 같습니다.

1. 입력받은 formData에 zod와 같은 라이브러리를 사용하여 타입을 검증합니다.
2. 검증에 성공한 데이터를 데이터베이스에 추가합니다.
3. revalidatePath와 같은 메서드를 사용하여 경로 재검증을 실행합니다. (해당 경로의 캐시 제거)
4. 업데이트된 데이터베이스를 UI에 적용하기 위해 페이지를 리디렉션합니다.