Next.js

서버 액션 이해하기

이전 절에서 클라이언트 컴포넌트의 useState 기반 상태 관리 방법을 다루었습니다. 전통적인 웹 개발에서 클라이언트가 서버에 데이터를 전송하고 상태를 변경하는 가장 흔한 방법은 API 엔드포인트(API Routes)를 호출하는 것이었습니다.

파일 단위와 함수 단위 선언 범위, 폼 제출, 서버 변경 작업을 기준으로 서버 액션 사용 기준을 정리합니다.

서버 액션 요청 처리 흐름

1

서버 액션 개념

서버 액션(Server Actions)은 클라이언트 측 JavaScript 없이도 클라이언트 컴포넌트나 폼에서 직접 서버 측 코드를 실행할 수 있도록 해주는 비동기 함수입니다.

2

서버 액션의 작동 방식

서버 액션은 마치 RPC(Remote Procedure Call)처럼 동작합니다.

3

서버 액션 사용법: use server 지시어

서버 액션을 정의하는 방법은 매우 간단합니다.

4

서버 액션의 장점과 고려사항

장점 향상된 개발자 경험: API 라우트를 직접 생성하고 fetch를 수동으로 호출하는 번거로움 없이, 일반 함수처럼 서버 로직을 호출할 수 있습니다.