[React] 동적라우팅 개념

기본 라우터(정적 라우팅)

// Router.js
const Router = () => {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/users" element={<Users />} />
        <Route path="/products" element={<Products />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};

페이지를 이동하는데 문제는 없으나, 리스트->디테일과 같이 라우터경로가 많아지면 대응하기 어려워짐. 제품 모두에게 id값이 있는데 이에 해당하는 라우터를 모두 지정해줘야함. 이에 Path Parameter 와 Query Parameter를 사용한 동적라우팅을 사용함.

동적라우팅이란

라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것

localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125

동적라우팅 구현에 사용되는 기술

Path Parameter

// Bad
"/users/1" => <Users id={1} />
"/users/2" => <Users id={2} />
"/users/3" => <Users id={3} />
"/users/4" => <Users id={4} />
"/users/5" => <Users id={5} />

// Good
"/users/:id" => <Users /> // useParams().id

Query Parameter

// Bad
"/search?keyword=위코드"    : <Search keyword="위코드" />
"/search?keyword=리액트"    : <Search keyword="리액트" />
"/search?keyword=라우팅"    : <Search keyword="라우팅" />
"/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" />
"/search?keyword=SPA"     : <Search keyword="SPA" />

// Good
"/search?keyword=something" : <Search /> // useLocation().search