React Router Dom v6에 대하여...

1. loader와 action에 대하여

• loader : 로더는 말 그대로 데이터를 가져다주는 것을 의미한다. 즉 우리가 어떤 페이지를 갈 때 그 페이지에 데이터를 로딩하고 그 데이터를 던져주는 역할을 한다. 그럼 여기서 이런 의문이 생길 수 있다. 만약 데이터가 로딩 되고 있으면? , 데이터는 어떻게 가져와? 그 역할을 하는 친구가 Suspense Await와 useLoaderData() 훅이다.
  
  

// ./pages/root.jsx
function Root() {
  const user = useLoaderData();
  // data from <Route path="/">
}

• action : 액션은 말 그대로 데이터를 서버에게 던져주는 것을 의미한다. 즉 우리가 어떤 데이터를 폼을 통해서 전달할 때 바로 백엔드 서버에게 전달하는 것이 아니라 클라이언트 서버에게 이를 전달하고 클라이언트 서버에서 유효성 검사 , 에러 바운딩등을 처리하고 나서 그 결과를 다시 프론트에게 넘겨주는 역할을 한다. 우리는 이를 통해서 좀 더 쉽고 명확하게 에러 바운딩 / 유효성 검사를 처리할 수 있다.

// ./routes/Router.jsx
<Route
  path="project/new"
  action={async ({ request }) => {
    const data = await request.formData();
    const newProject = await createProject(data);
    // it's common to redirect after actions complete,
    // sending the user to the new record
    return redirect(`/projects/${newProject.id}`);
  }}
/>

2. errorElement 에 대하여

 : errorElement는 그 페이지에서 에러가 발생했을 때 그 에러를 처리할 수 있는 트리거를 의미한다. 여기서 errorElement는 주의할 점이 단위가 컴포넌트 단위가 아니라 페이지 단위라는 점이다. 즉 어떤 에러가 페이지 단위에서 발생할 경우 처리하는 트리거라고 볼 수 있다. 따라서 우린 errorElement를 쓸 때 발생하는 에러의 단위를 주의깊게 살펴 볼 필요가 있다.

<Route
  path="project/new"
  errorElement = {{ 에러 관련된 컴포넌트 }}
/>

 

3. Suspense와 Await에 대하여

• Suspense : 서스펜스는 React Router Dom의 이전 버전에도 존재했던 기능이다. 이 기능이 존재하는 이유 중 하나는 프로그래밍의 방식이 명령적 프로그래밍이 아니라 선언적 프로그래밍으로 이루어진다는 것이다. 즉 프로그래밍을 처리할 때 명령적으로 모든 코드의 절차를 보여주는 것이 아니라 그 과정을 따로 컴포넌트 / 훅으로 빼고 그 결과를 사용해서 중간 과정을 생략하는 것이다.
• Await : Await는 Suspense의 결과가 성공적일 때 처리하는 컴포넌트이다. 이 컴포넌트의 특징은 children으로 loader에서 받아온 데이터를 가지고 있다는 점이다. 즉 우리가 useLoaderData를 통해서 가져올 필요없이 Await 컴포넌트를 통해서 해당 과정을 생략하고 좀 더 선언적 프로그래밍에 가까운 작업을 할 수 있다는 장점이 있다.

<Suspense fallback={<IssueHistorySkeleton />}>
        {/* Await manages the deferred data (promise) */}
        <Await resolve={history}>
          {/* this calls back when the data is resolved */}
          {(resolvedHistory) => (
            <IssueHistory history={resolvedHistory} />
          )}
        </Await>
</Suspense>

 

참고자료

https://minprogramming.tistory.com/entry/Suspense에-대하여

Suspense에 대하여...

https://reactrouter.com/en/main/start/overview

Feature Overview v6.20.1