[TIL] 리액트 라우터 action으로 포스트 요청 처리하지 않은 이유

[sgoldenbird]

📌 배운 내용

• React Router의 action은 주로 폼 전송이나 복잡한 라우팅 흐름을 포함한 POST 요청 처리에 적합하다.

---

🔍 배경 / 문제 상황

VoteModal에서 특정 아이돌에게 투표하는 기능의 POST 요청을 처리하는 방식을 두고 React Router의 action을 사용할지,
혹은 그냥 requestPost 함수로 처리할지를 고민하게 되었습니다.

---

✅ 핵심 정리 / 해결 방법

• action은 복잡한 전송 흐름(예: 리다이렉트, 새로고침, 상태 공유 등)이 필요한 경우에 적합합니다.

• 단순한 API 요청만 필요할 때는 일반 requestPost 함수로 처리하는 것이 더 간단해 보였습니다.

• VoteModal의 경우는 후자에 해당하며, action을 사용하는 건 오히려 불필요한 구조 복잡도를 초래합니다.

• 이러한 이유로 처음에는 form 기반이 아니어도 action을 활용해볼까 싶었지만, 실제 로직을 살펴보니 단순히 API에 요청을 보내는 구조였고,
  요청 이후 라우팅 변경이나 리다이렉트, 새로고침 같은 처리가 필요하지 않았습니다. 그래서 기존의 requestPost를 사용하는 것이 낫다고 판단했습니다.

• action을 써야 할 대표적인 케이스 예시

1. 폼 전송 후 리다이렉트가 필요한 경우
   • 회원가입, 글 작성, 댓글 등록 등
   • action은 라우터와 연동되어 있어 전송 → 리다이렉트 흐름을 깔끔하게 구성할 수 있음

export async function action({ request }) {
  const formData = await request.formData();
  await requestPost('/api/register', Object.fromEntries(formData));
  return redirect('/thank-you');
}

2. 현재 페이지를 새로고침 또는 데이터 리로딩해야 하는 경우
   • 삭제 요청, 상태 변경 요청 등
   • action을 쓰면 현재 라우트의 loader가 자동으로 다시 실행되어 새 데이터를 반영할 수 있음

export async function action({ request }) {
  await requestDelete('/api/item/123');
  return null; // 기존 페이지 그대로 리렌더됨
}

3. 라우팅 또는 브라우저 기록(history)에 영향을 주는 처리일 경우
   • 로그인, 로그아웃, 구매 완료 등
   • action은 리다이렉트 시 history를 push하기 때문에 사용자 이동 흐름을 자연스럽게 이어갈 수 있음

export async function action({ request }) {
  await requestPost('/api/login');
  return redirect('/dashboard');
}

---

🧠 느낀점 또는 생각 메모

React Router의 action은 강력한 기능이지만, 모든 POST 요청에 무조건 사용할 필요는 없다는 걸 느꼈습니다.
요청 후 라우팅 변화나 상태 동기화가 필요 없는 단순 요청이라면, 기존의 fetch wrapper를 사용하는 방식이 훨씬 간결하고 명확합니다.
앞으로도 상황에 따라 "기능이 아니라 흐름의 복잡도"를 기준으로 선택하는 습관이 중요하다고 느꼈습니다.

---