---
category: Frontend
tags: [auto-wikified, technical-documentation, frontend]
title: React Server Actions
description: "React Server Actions는 React Server Components(RSC) 환경에서 데이터를 조작(Mutate)하기 위해 사용되는 메커니즘으로, 함수 상단에 `'use server'` 프라그마를 선언하여 정의합니다 [1, 2]."
last_updated: 2026-05-04
---

# React Server Actions

## 📌 Brief 시 Summary
React Server Actions는 React Server Components(RSC) 환경에서 데이터를 조작(Mutate)하기 위해 사용되는 메커니즘으로, 함수 상단에 `"use server"` 프라그마를 선언하여 정의합니다 [1, 2]. 개발자가 일반적인 로컬 함수처럼 클라이언트 이벤트 핸들러에서 호출하면, React가 내부적으로 이를 HTTP 엔드포인트로 변환하여 서버와의 단일 왕복(one round trip)만으로 작업을 처리합니다 [3-5]. 특히 폼(Form) 처리와 같은 단순한 데이터 전송 시나리오에서 뛰어난 개발 편의성과 효율성을 제공합니다 [6].

## 📖 Core Content
* **데이터 뮤테이션 및 단일 왕복 처리 (Data Mutation & Single Round Trip)**: 서버 액션은 서버 컴포넌트에서 데이터를 업데이트하기 위해 사용하는 기능입니다 [1]. 개발자가 작성한 순수 함수를 클라이언트 컴포넌트로 가져와 버튼 클릭 등의 이벤트 핸들러에서 호출할 수 있으며, 이 과정에서 클라이언트와 서버 간의 네트워크 요청이 단일 왕복으로 이루어집니다 [3, 4].
* **폼(Form) 처리의 탁월성**: 단일 폼과 제출 버튼이 있는 페이지와 같이 데이터 소스가 복잡하게 얽혀있지 않은 경우, 서버 액션은 매우 뛰어난 성능과 편리성을 보여줍니다 [6]. Next.js 환경에서는 폼의 `action` 속성에 서버 액션을 직접 설정할 수 있으며 `useFormStatus`와 같은 관련 훅을 함께 사용할 수 있습니다 [6].
* **공개 HTTP 엔드포인트로서의 본질**: 서버 액션은 코드상으로는 내부 함수를 호출하는 것처럼 보이지만, 실제로는 클라이언트의 요청을 HTTP 요청으로 변환하여 서버가 역직렬화하고 실행하는 공개된 HTTP 엔드포인트(Public HTTP endpoint)로 작동합니다 [5, 7].

## ⚖️ Trade-offs & Caveats
* **직렬화된 순차 실행 (Serial Execution)의 한계**: 서버 액션은 한 번에 하나씩 직렬로만 실행될 수 있습니다 [8]. 여러 액션을 동시에 시도할 경우 대기열(Queue)에 적체되며, 네트워크 환경이 느릴 때 여러 번 저장 버튼을 클릭하면 심각한 성능 지연 병목 현상을 유발할 수 있습니다 [8].
* **캐시 무효화로 인한 전체 재렌더링 발생**: 서버 액션 내부에서 `revalidateTag` 등을 호출하여 데이터를 업데이트할 때, 프레임워크(예: Next.js)는 변경된 데이터만 부분적으로 업데이트하는 것이 아니라 해당 페이지의 모든 RSC 트리를 다시 렌더링하고 관련 데이터를 전부 다시 요청하는 오버페칭(Over-fetching) 문제를 발생시킬 수 있습니다 [4, 9].
* **보안 취약점 노출 위험 (Security Vulnerabilities)**: 서버 액션은 누구나 POST 요청을 보낼 수 있는 공개 엔드포인트입니다 [7]. 개발자가 이를 단순히 내부 로컬 함수로 착각하고 입력값에 대한 유효성 검증(Validation) 및 정제(Sanitization)를 생략하면, 원격 코드 실행(RCE)과 같은 치명적인 보안 취약점(예: React2Shell)에 노출될 수 있습니다 [5, 7, 10]. 따라서 일반적인 외부 API를 다룰 때와 동일한 수준의 엄격한 데이터 검증이 필수적입니다 [7].

---
*Last updated: 2026-05-03*