React-router-dom : loader 함수를 통한 URL 가져오기

loader 함수는 페이지가 렌더링되기 전에 데이터를 미리 로드하는 함수로, params와 request를 통해서 URL 파라미터 및 쿼리 문자열을 사용할 수 있다. loader 함수의 params의 경우에 리액트 라우터의 useParams과 같은 정보를 제공하지만, 웹 페이지가 렌더링이 되기 전에 데이터를 가지고 있다는 차이점이 있다. 

 

URL 가져오기 예시

1. 다중 가변 인자 URL 경로 사용 예시

• 예시 : /category1/item1

(1) App.jsx 에서 라우트 정의 및 load 함수 정의

import { createBrowserRouter, RouterProvider } from "react-router-dom"
import Root from "./pages/Root"
import Home from "./containers/Home"
import About from "./containers/About"
import Item from "./containers/Item"

function App() {

  // 라우트 정의
  const router = createBrowserRouter([
    {path: "/", element: <Root/>,
      children: [
        {path: "/", element: <Home/>},
        {path: "/About", element: <About/>},
        //loader에 생성한 함수 
        {path: "/:category/:itemId", element: <Item/>, loader: loadItemData}
      ]
    }
  ])

  // loader로 사용할 load 함수생성
  async function loadItemData({params}){
    const {category, itemId} = params;
    return {category, itemId};
  }

  return (
    <RouterProvider router={router}/>
  )
}

export default App

 

(2) loader를 사용할 컴포넌트에 useLoaderData를 통해 category, itemId를 받아온다.  

import { useLoaderData } from "react-router-dom";

const Item = () => {
    const {category, itemId} = useLoaderData();
    return(
        <div>
            <h1> {category} </h1>
            <p> {itemId} 컴포넌트 </p>
        </div>
    );
}

export default Item;

 

이렇게 하나의 컴포넌트에 여러 개의 가변인자를 받아서 사용이 가능하다. 

 

2. URL path에 고정인자와 쿼리 파라미터가 포함된 경우

• 예시 : /category1/item1?name=abc

(1) App.jsx 에서 라우트 정의 및 load 함수 정의

쿼리 파라미터가 포함된 경우 loader함수의 request 매개변수를 통해 가져올 수 있다.

import { createBrowserRouter, RouterProvider } from "react-router-dom"
import Root from "./pages/Root"
import Home from "./containers/Home"
import About from "./containers/About"
import Item from "./containers/Item"

function App() {

  // 라우트 정의
  const router = createBrowserRouter([
    {path: "/", element: <Root/>,
      children: [
        {path: "/", element: <Home/>},
        {path: "/About", element: <About/>},
        //loader에 생성한 함수 
        {path: "/:category/:itemId", element: <Item/>, loader: loadItemData}
      ]
    }
  ])

  // loader로 사용할 load 함수생성
  async function loadItemData({params, request}){
    const {category, itemId} = params;
    //request를 통해서 쿼리파라미터 가져오기
    const url = new URL(request.url);
    const name = url.searchParams.get("name");
    return {category, itemId, name};
  }

  return (
    <RouterProvider router={router}/>
  )
}

export default App

(2) loader를 사용할 컴포넌트에 useLoaderData를 통해 category, itemId, name을 받아온다. 

import { useLoaderData } from "react-router-dom";

const Item = () => {
  const { category, itemId, name } = useLoaderData();

  return (
    <div>
      <h1>{category}</h1>
      <p>{itemId} 컴포넌트</p>
      {name && <p>이름: {name}</p>}
    </div>
  );
};

export default Item;