[React] 서버 액션(alpha)

 

서버 액션(Server Actions)은 React 18에서 새롭게 도입된 기능으로, 서버에서 실행되는 코드를 클라이언트에서 쉽게 호출할 수 있게 해준다. 이는 서버에서 직접 액션을 처리하고, 그 결과를 클라이언트로 반환하는 방식으로 작동하여 클라이언트에서 복잡한 상태 관리나 비동기 처리를 덜어주는 장점을 가지고 있다

 

 

React 서버 액션의 주요 특징

 

1. React 컴포넌트에서 호출 가능

서버 액션은 React 컴포넌트 내에서 호출할 수 있으며, 서버 액션이 완료되면 결과값을 받아 렌더링할 수 있습니다. 이를 통해 클라이언트에서 복잡한 로직을 구현할 필요 없이 서버에서 처리된 데이터를 바로 사용할 수 있습니다.

 

2. 직접적인 서버와 클라이언트 통신

서버 액션은 클라이언트가 직접 호출하는 서버 함수입니다. 이는 서버와 클라이언트 간의 통신을 직관적으로 만들어줍니다. React가 서버에 액션을 전달하고, 서버에서 결과를 받아오게 되는 이 과정은 서버측에서 해당 작업을 처리하기 때문에 클라이언트에서는 상태 관리나 비동기 처리를 복잡하게 할 필요 없어지고 React가 이 통신을 추상화해 관리합니다.

 

3. 비동기 지원

서버 액션은 비동기 처리를 지원하며, await 키워드를 사용하여 서버 액션이 완료될 때까지 대기할 수 있습니다. 이 덕분에 API 호출이나 데이터베이스 쿼리 같은 작업을 서버 액션 안에서 쉽게 처리할 수 있습니다.

 

5. 서버 액션의 보안

서버 액션은 서버에서만 실행되기 때문에, 클라이언트에서 민감한 로직을 실행하지 않아도 됩니다. 중요한 데이터 처리나 비즈니스 로직을 서버 측에서 안전하게 처리할 수 있으며, 클라이언트는 결과만 받아 처리하게 됩니다.

 

---

 

 

예시 코드

'use server'

export async function saveUserData(formData) {
  const data = Object.fromEntries(formData); // FormData 객체를 JSON으로 변환
  const res = await fetch('/api/save', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
    },
  });

  return res.json();
}

// 클라이언트 컴포넌트
export default function UserForm() {
  return (
    <form action={saveUserData}>
      <input name="username" />
      <button type="submit">Save</button>
    </form>
  );
}

<form action={saveUserData}>

서버 액션을 사용하려면 폼의 action 속성에 서버 액션 함수가 연결되어야 한다.

폼이 제출되면 서버에서 바로 saveUserData 함수가 실행된다.

폼 데이터를 formData로 전달받음

 

export async function saveUserData(formData) {
  const data = Object.fromEntries(formData); // FormData 객체를 JSON으로 변환
  const res = await fetch('/api/save', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
    },
  });

  return res.json();
}

1. res.json()의 역할