🏕️ React Router Loader 도입기

개인과제를 진행하던 중, Layout Shift 문제와 로그인 상태에 따라
페이지를 이동시키는 로직을 구현하는 방법에는 뭐가 있을까?
라고 생각하다가, 문득 React Router 라이브러리의 Loader가 떠올랐습니다.

사용하기전에 Docs부터 읽어보자!

각 경로는 렌더링되기 전에 경로 요소에 데이터를 제공하는 loader 기능을 정의할 수 있습니다.
사용자가 다른 경로로 이동할 경우, 해당 경로의 loader 기능이 병렬적으로 실행되고,
useLoaderData 훅을 통해 컴포넌트에 전달됩니다.

레이아웃 시프트 문제는 해당 페이지가 렌더링 된 후 데이터를 제공해
없던 데이터가 짠! 하고 나타나는 현상입니다.

따라서 React Router 라이브러리의 loader 를 사용한다면
렌더링 되기 전에 데이터를 제공해 레이아웃 시프트 이슈가 발생하지 않겠죠?

또한 로그인 여부도 loader 로직에서 판단해 만약 로그인 상태가 아니라면
로그인 페이지로 리다이렉트 되고, 로그인 토큰이 아직 유효하다면 로그인하였을때 보이는 페이지(마이페이지)로 이동시키는 로직도 담아줄 수 있습니다!

loader의 단점

만약 이동한 페이지에서 많은 데이터를 가져오는 로직을 loader에 작성할 경우,
loader는 그 데이터들이 완벽히 불러와지기전까지는 화면을 보여주지 않기때문에,
유저 입장에서는 웹사이트가 멈춰있는 것처럼(블로킹된 것처럼) 보일 수 있습니다!

따라서 만약 많은 데이터를 불러와야되는 상황에서 레이아웃 시프트가 걱정된다면,
React의 Suspense 컴포넌트와 함께 Skeleton UI 를 적용시키는 편이 나을 것 같다고 생각합니다!

---

Docs도 읽었고, 어떻게 동작하는지도 알았으니 이제는 코드로 옮겨 적용시켜볼까요?

로더를 넣어보자!

적용시켜보기

// router.jsx
const router = createBrowserRouter([
  {
    path: "/",
    element: <LoginPage />,
  },
  {
    element: <Layout />,
    children: [
      {
        path: "/home/:user",
        loader: async ({ params }) => {
          try {
            const token = sessionStorage.getItem("token");
            const user = await authApi.getUserData(token);
            if (params.user !== user.id) return redirect(`/home/${user.id}`);
            return paymentHistoryApi.getPaymentHistoryById(user.id);
          } catch (err) {
            toast.error("세션이 만료되었습니다. 다시 로그인해주세요.");
            sessionStorage.removeItem("token");
            return redirect("/");
          }
        }
        element: <HomePage />,
      },
      {
        path: "/detail/:user/:itemId",
        element: <DetailPage />,
      },
    ],
  },
]);

로직에 필요한 요구사항은 2가지였습니다.

1. 유저가 세션에 가지고있는 액세스 토큰이 유효하지않더라면 로그인 페이지로 이동
2. 1번 단계가 통과되었다면 그 유저의 id를 바탕으로 서버에서 유저의 데이터 가져오기

// 서버에 액세스 토큰을 넣어 `GET` 요청을 보내고,
const token = sessionStorage.getItem("token");
const user = await authApi.getUserData(token);

// 만약 토큰이 유효하지 않다면 에러를 반환할 것이므로 `catch` 문에서 유효하지 않은 토큰을 삭제,
// 로그인 페이지로 이동하는 로직을 작성
catch (err) {
  toast.error("세션이 만료되었습니다. 다시 로그인해주세요.");
  sessionStorage.removeItem("token");
  return redirect("/");
}

// loader 함수의 매개변수 params에서 user 부분을 가져와,
// 현재 로그인한 유저의 아이디와 url상의 user가 다르다면 현재 로그인한 유저의 페이지로 이동
if (params.user !== user.id) return redirect(`/home/${user.id}`);

// 최종적으로 서버에 유저의 데이터들을 가져와 return 해주기
return paymentHistoryApi.getPaymentHistoryById(user.id);

그리고 사용해주는 컴포넌트에서는 Docs에서 알려준것과 같이 사용하였습니다.

// HomePage.jsx
const initialHistoryList = useLoaderData();

---

가독성 높여보기

다른 페이지에도 위와 같이 로더를 적용시켜야되는 상황이어서 다른 페이지에도 적용을 시켜줬으나
로더 로직들을 페이지마다 담아두니 코드가 길어지고 가독성이 좋지않아
따로 loaders.js 파일을 만들어 분리시켜주었습니다.

// router.jsx
const router = createBrowserRouter([
  {
    path: "/",
    loader: loginPageLoader,
    element: <LoginPage />,
  },
  {
    element: <Layout />,
    children: [
      {
        path: "/home/:user",
        loader: homePageLoader,
        element: <HomePage />,
      },
      {
        path: "/detail/:user/:itemId",
        loader: detailPageLoader,
        element: <DetailPage />,
      },
    ],
  },
]);

export default router;

// loaders.js
const getUser = async () => {
  const token = sessionStorage.getItem("token");
  const user = await authApi.getUserData(token);
  return user;
};

export const loginPageLoader = async () => {
  try {
    const user = await getUser();
    return redirect(`/home/${user.id}`);
  } catch (err) {
    return null;
  }
};

export const homePageLoader = async ({ params }) => {
  try {
    const user = await getUser();
    if (params.user !== user.id) return redirect(`/home/${user.id}`);
    return paymentHistoryApi.getPaymentHistoryById(user.id);
  } catch (err) {
    toast.error("세션이 만료되었습니다. 다시 로그인해주세요.");
    sessionStorage.removeItem("token");
    return redirect("/");
  }
};

export const detailPageLoader = async ({ params }) => {
  try {
    const user = await getUser();
    if (params.user !== user.id) return redirect(`/home/${user.id}`);
    return paymentHistoryApi.getPaymentHistoryByItemId(params.itemId);
  } catch (err) {
    toast.error("세션이 만료되었습니다. 다시 로그인해주세요.");
    sessionStorage.removeItem("token");
    return redirect("/");
  }
};