React Router에서 action 메서드로 데이터 추가하기

이번 강의에서는 라우트 객체의 action 메서드에 대해 알아보겠습니다. 이 메서드는 애플리케이션이 라우트에 HTTP 요청을 POST, PUT, PATCH 또는 DELETE(GET 제외) 타입으로 보낼 때 호출됩니다.

먼저, 이전 강의에서 작성한 상품 생성 함수를 root.jsx로 가져옵니다:

routes/root.jsximport { createProduct } from '../forStorage';

이제 React Router가 상품 추가 버튼을 클릭할 때 호출할 action 함수를 만들어야 합니다. loader 함수 뒤에 배치하겠습니다:

routes/root.jsxexport async function action() {
  const product = await createProduct();
  return { product };
}

main.jsx를 열고 action을 가져옵니다:

main.jsximport Root, {
  loader as rootLoader,
  action as rootAction
} from './routes/root';

그리고 라우트 객체의 action 메서드 값으로 설정합니다. Form 컴포넌트는 버튼을 클릭할 때 브라우저가 서버에 요청을 보내지 못하게 하고, 대신 우리 라우트의 action 메서드를 호출합니다. React Router의 클라이언트 사이드 라우팅이 이렇게 흥미롭게 작동합니다:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
  
]);

애플리케이션을 실행해 봅시다. 개발자 도구 패널에서 '애플리케이션' (Chrome에서는 Application) 탭을 열고, 다양한 저장소 타입 중 indexedDB를 클릭한 다음, 여기서는 localforage에 관심이 있습니다. 이제 애플리케이션에서 상품 추가 버튼을 클릭하고 클릭 후 localforage 저장소를 새로고침하면, keyvaluepairs에 products 배열에 다른 id를 가진 객체들이 추가되는 것을 볼 수 있습니다. 성공!!! 이것은 우리 저장소에 레코드가 생성되고 있다는 뜻입니다! 물론 애플리케이션의 목록도 채워집니다. 참고: 나중에 Application 탭의 'Storage'에서 이 페이지의 저장된 데이터를 정리하는 것을 잊지 마세요.