●[Main-Project] Refactor: react-router loder 설정

코드 분할이나, 리팩토링을 마친 이후에 오늘은 앞으로 최적화를 어떻게 할건지에 대해서 회의를 마쳤습니다.

앞으로 최적화할 부분 예시

• 이미지 요소에 [alt] 속성 없음
• 사진 webp로 변환
• 시맨틱 태그도 수정

오늘 포스팅은 이전에 준석님께서 리팩토링해주셨던 부분이 잘 이해가 가지 않았어서 오늘 설명을 듣고 올리는 포스팅입니다.

 

● React-Router Loader 설정

이전에 저희팀은 accessToken이 없으면 다른 페이지 이동 되게 설정했었는데요. 코드는 아래와 같습니다.

  useEffect(() => {
    if (!accessToken) {
      navigate(Path.Login);
    }
  }, [accessToken, navigate]);

useEffect를 사용해서, 렌더 이후에 없는지 판단하고 다시 로그인페이지로 이동되게끔 했는데요, 지금와 생각해보니 useEffect도 paint이후에 작업하는 과정이기때문에 굳이 ..? useLayoutEffect를 사용하는것도 나쁘지 않았을까 싶긴한데 성능면에서 차이가 있는지는 저도 확신할수가 업내염.. 아무튼 준석님께서 이 과정을 react-router-dom에 있는 loader를 사용해 적용해주셨습니다.

router.ts

import Login from '@/pages/login/Login.tsx';
import NotFound from '@/pages/notFound/NotFound.tsx';
import Path from '@/routers/paths.ts';
import { aouthLoder, unAouthLoder } from '@/util/aouthLoder';

export const router = createBrowserRouter([
  {
      {
        path: Path.Login,
        element: <Login />,
        loader: aouthLoder,
      },
      {
        path: Path.Info,
        lazy: () => import('@/pages/info/Info'),
        loader: unAouthLoder,
      },
      {
        path: Path.InfoEditing,
        lazy: () => import('@/pages/info/Info'),
        loader: unAouthLoder,
      },
      ...

router.ts에서 loader에 aouthLoder와 unAouthLoder를 적용해주셨는데요, 이 함수들은 아래와 같습니다.

import { redirect } from 'react-router-dom';

export function getToken() {
  const accessToken = localStorage.getItem('accessToken');
  if (!accessToken) {
    return null;
  }
  return accessToken;
}

export function unAouthLoder() {
  const token = getToken();
  if (!token) {
    return redirect('/login');
  }
  return null;
}

export function aouthLoder() {
  const token = getToken();
  if (token) {
    return redirect('/home');
  }
  return null;
}

로컬스토리지에 accessToken이 저장되어있는지 여부에따라 redirect되게 설정해주셨네용 허허

Each route can define a "loader" function to provide data to the route element before it renders.

react-router-dom에서는 route element를 렌더링 하기 전에, loader라는 함수를 제공해준다. 즉, loader가 실행된다는 것 같네요 ㅎ_ㅎ

이런 좋은 꿀팁이..? react-router-dom은 진짜 평소에 잘 활용하면 좋을 것 같다는 생각을 매번 합니다,,

loader v6.15.0