Server Action

서버 액션은 서버에서 실행되는 비동기 함수를 의미합니다. 서버 액션은 서버 컴포넌트와 클라이언트 컴포넌트에서 모두 사용할 수 있습니다.

tip

비동기라는 개념이 낯설다면 다음 글을 읽어보세요 :) 자바스크립트 비동기 처리와 콜백 함수

서버 액션 기본

서버 액션은 use server 디렉티브로 정의할 수 있습니다. 먼저, 서버 컴포넌트에서 서버 액션을 정의하는 코드를 봅시다.

// app/page.tsx

// 서버 컴포넌트
export default function Page() {
  // 서버 액션
  async function create() {
    'use server'
 
    // ...
  }
 
  return <div></div>
}

서버 컴포넌트 안에 async 함수를 정의하고 그 함수 안의 첫 번째 줄에 use server 디렉티브를 선언하면 됩니다.

이번엔 클라이언트 컴포넌트에서 호출할 수 있도록 정의하는 방법을 보겠습니다.

// app/actions.ts
'use server'
 
export async function create() {
  // ...
}

위와 같이 먼저 async와 use server를 이용하여 서버 액션 함수를 별도의 파일에 정의합니다. 그다음 클라이언트 컴포넌트에 다음과 같이 임포트를 합니다.

// app/ui/button.tsx

import { create } from '@/app/actions'
 
export function Button() {
  return (
    <button></button>
  )
}