[React-Router] action의 역할

🚀 action이 하는 역할

action은 React Router에서 특정 라우트에서 폼 제출 또는 데이터 변경 요청(예: DELETE, POST, PUT)이 발생했을 때 실행되는 핸들러입니다.
즉, fetch 요청을 직접 작성하는 대신, useSubmit 훅이나 <Form>을 사용하여 action을 호출하면 자동으로 해당 action 함수가 실행됩니다.

---

🛠 EventDetailPage에서 action 사용 예제

이 코드에서 action은 이벤트 삭제 (DELETE 요청) 처리를 담당합니다.

export async function action({ request, params }) {
  const eventId = params.eventId;
  const response = await fetch("http://localhost:8080/events/" + eventId, {
    method: request.method, // 보낸 요청의 메서드를 사용 (DELETE)
  });

  if (!response.ok) {
    throw new Response(
      JSON.stringify({
        message: "Could not delete event.",
      }),
      {
        status: 500,
      }
    );
  }

  return redirect("/events"); // 삭제 후 이벤트 목록 페이지로 이동
}

🔍 action 실행 흐름

1. EventItem에서 "Delete" 버튼 클릭 시, startDeleteHandler() 실행
2. window.confirm("Are you sure?")에서 확인하면 submit(null, { method: "delete" }) 실행
3. submit이 실행되면서 해당 라우트(event-detail의 action)가 호출됨
4. action이 DELETE 요청을 백엔드로 보냄
5. 삭제 성공 시 redirect("/events")를 반환하여 페이지를 이동시킴

function startDeleteHandler() {
  const proceed = window.confirm("Are you sure?");

  if (proceed) {
    submit(null, { method: "delete" });
  }
}

💡 action이 필요한 이유

• 기존 방식에서는 useEffect로 fetch 요청을 보내고, useState로 데이터를 업데이트해야 하지만,
  React Router의 action을 사용하면 라우트 수준에서 데이터를 변경하고 바로 UI를 업데이트할 수 있음
• action을 사용하면 추가적인 상태 관리 없이도 데이터 변경을 처리하고, 페이지 이동을 쉽게 할 수 있음
• redirect()를 사용하여 데이터 변경 후 자동으로 페이지를 이동할 수 있음
• 데이터 조작 (POST, PUT, DELETE)을 라우트에서 일괄 처리하여 코드를 구조적으로 관리할 수 있음

---

📌 loader vs action 정리

기능	loader	action
역할	페이지 렌더링 전에 데이터를 불러옴 (GET)	폼 제출이나 submit()을 통해 데이터 변경 요청을 처리 (POST, PUT, DELETE)
실행 시점	페이지 이동 전에 실행됨	submit 또는 <Form> 제출 시 실행됨
사용 예시	이벤트 목록 불러오기	이벤트 삭제, 수정, 생성 처리
리턴 값	return response.json(); (데이터 반환)	return redirect(); (리디렉션 가능)
핵심 기능	데이터를 미리 불러와 로딩 없이 페이지 표시	데이터를 변경하고, 필요 시 페이지 이동 처리

---

이제 action을 활용하면 더 깔끔하고 구조적인 React Router 코드를 작성할 수 있습니다! 🚀