React Router의 action과 loader 사용해서 에러 메시지 전달하고 표시하기

React Router를 사용하여 action에서 loader로 에러 메시지를 전달하는 예시:

// eventActions.ts
import { ActionFunctionArgs } from 'react-router-dom';
import { updateEvent } from '../api/eventApi';

export async function updateEventAction({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const eventData = Object.fromEntries(formData);

  try {
    await updateEvent(params.id, eventData);
    return { success: true };
  } catch (error) {
    return { 
      isError: true, 
      message: error instanceof Error ? error.message : 'An unexpected error occurred'
    };
  }
}

// eventLoaders.ts
import { LoaderFunctionArgs, useActionData } from 'react-router-dom';
import { getEventById } from '../api/eventApi';

export function eventLoader({ params }: LoaderFunctionArgs) {
  const actionData = useActionData();

  const event = await getEventById(params.id);

  return { 
    event,
    error: actionData?.isError ? actionData.message : null
  };
}

// EventDetail.tsx
import React from 'react';
import { useLoaderData } from 'react-router-dom';

export function EventDetail() {
  const { event, error } = useLoaderData();

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>{event.name}</h1>
      {/* 이벤트 상세 정보 표시 */}
    </div>
  );
}

이 접근 방식의 주요 특징:

1. Action 함수:

   • 에러 발생 시 throw 대신 객체를 반환하여 에러 정보 전달
   • isError 플래그로 에러 상태 표시

2. Loader 함수:

   • useActionData를 통해 action의 결과 접근
   • 에러 발생 시 해당 정보를 컴포넌트에 전달

3. 컴포넌트:

   • useLoaderData를 통해 loader에서 전달한 데이터 접근
   • 에러 발생 시 서버에서 전달받은 메시지 표시

이 방식의 장점:

• Action과 loader 간의 데이터 흐름을 활용하여 에러 처리
• 서버에서 전달한 구체적인 에러 메시지를 사용자에게 표시 가능
• React Router의 기능을 최대한 활용

주의사항:

• 실제 프로덕션 환경에서는 민감한 정보가 포함된 에러 메시지를 그대로 표시하지 않도록 주의
• 필요에 따라 에러 메시지를 필터링하거나 사용자 친화적으로 변환하는 로직 추가 고려