react-router-dom loader

loader

loader는 react-router-dom에서 지원해주는 기능이다. 아래 예시를 봐보자.

JSON 방식 (createBrowserRouter)


const router = createBrowserRouter([
  {
    path: "/",
    element: <MainPage />,
    loader: mainLoader,
  },
]);

이렇게 createBrowserRotuer로 router를 생성해주고 속성으로 path, element를 입력한다. 이건 내가 주로 사용하던 컴포넌트 방식이랑 비슷하다.

컴포넌트 방식


<Routes>
  <Route path="/" element={<Navigate to="/main" />} loader={mainLoader} />
</Routes>

lodaer는 element(페이지)를 불러오는 과정에서 데이터를 불러와야 한다던지, 스타일링을 새로 해야한다던지 그럴 때 사용한다. lodaer를 사용하기 전에는 불러오는 element, 즉 페이지 내에서 데이터 불러오기 코드를 작성해야 했다. 이런 식으로 말이다.



const MainPage = () => {
  const navigate = useNavigate();
  const [goodsList, setGoodsList] = useState<GoodsType[]>();

  const getData = async () => {
    const data = await getGoodsAPI();
    setGoodsList(data);
  };

  useEffect(() => {
    getData();
  }, []);

	~~~~
```

하지만 loader를 사용한다면 위 로직을 분리할 수 있어 가독성이 좋다.


const mainLoader = async () => {
  const { data } = await getOrderDataApi();

  return useGetTodayOrder(data);
};


const orderDataResponse = useLoaderData();

이런 식으로 말이다. useLoaderData()를 실행시키기만 하면 데이터를 불러올 수 있다! 따로 useEffect만들고 async await 함수 만들고 이런 일이 없어도 된다는 것이다.

References

loader v6.9.0

https://reactrouter.com/en/main/route/loader