[React]동적라우팅

📓동적라우팅

라우팅을 설정하는 가장 기본적인 방법은 정적(static, pre-defined)라우팅이다.
즉, Router 컴포넌트에서 미리 프로젝트에서 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식이다.
하지만, 복잡하고 규모가 큰 애플리케이션에서는 경로를 미리 설정하는 방식으로는 처리가 힘들다.

정적 라우팅의 예시는 아래와 같다.

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ListComponent />} />
        <Route path="/post/1" element={<First />} />
        <Route path="/post/2" element={<Second />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

이러한 route가 한두개 일 때는 무리가 없지만, 100개 이상으로 쌓이게 된다면 /post/1 ~ 100의 Route를 모두 설정해야 한다. 중간에 삭제한다면 다시 해당 Route를 삭제해야 한다.
이러한 정적 라우팅은 Route를 유연하게 정의할 수 없다는 단점을 가지고 있다.

이 문제를 해결하기 위해서 나온 개념이 동적 라우팅이다.
동적 라우팅은 Route를 설정할 때, 특정 규칙을 정의한 후 규칙에 부합하는 URL의 경우에는 해당 element를 보여주게 설정하는 방식이다.

동적 라우팅을 사용하면 규칙을 만족하는 모든 URL에 대해서 상세페이지로 연결시킬 수 있기 때문에 애플리케이션을 확장성있게 만들 수 있다.

📓동적 라우팅 구현

동적 라우팅은 react-router-dom 라이브러리를 이용해서 구현할 수 있다.
구현 방법은 Route 컴포넌트의 path prop에 : 기호를 활용하는 것이다.
경로/:문자열형태로 path를 설정하면 URL에서 경로/뒤에 무슨 글자가 오든 이 Route로 연결된다.

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ListComponent />} />
        <Route path="/post/:id" element={<DetailComponent />} />
      </Routes>
    </BrowserRouter>
  );
}

위와 같이 Route를 설정하면 경로를 따로 지정해주지 않아도 DetailComponent로 연결이 된다.
위의 코드에서 : 기호 뒤에 붙은 id와 같은 문자열이 path parameter이다.

📓동적 라우팅과 Path Parameter

path parameter는 URL에 있는 값을 마치 매개변수처럼 사용하는 것이다. 똑같은 함수에 다른 매개변수를 통해서 다양한 결과를 낼 수 있는 것처럼 path parameter를 통해서 큰 틀은 동일하되 다른 UI를 보여주도록 처리할 수 있따.

동적 라우팅을 설정하려면 Route의 path prop에 경로/:문자열을 넣어줘야 한다. 이때 문자열 자리에 작성되는 것이 path parameter의 이름이다.이름은 자유롭게 작성 가능하다.
이렇게 컴포넌트 안에서 path parameter로 전달된 값을 이용해 특정한 처리를 하는 코드를 작성하면 동일한 컴포넌트에서 다양한 UI를 보여주는 것이 가능하다.

📓Path Parameter 활용

📙useParams hook

react-router-dom에서는 useParams hook을 제공한다. useParams hook은 path parameter의 값을 편하게 가져올 수 있게 해주며 마치 state처럼 path parameter의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공해준다.

useParams를 호출하면 path params의 값을 객체 형태로 반환해준다. 이때 객체의 프로퍼티의 key는 Route에서 설정한 path parameter의 이름이며 value는 path parameter에 실제로 전달된 값이다.
위에서 사용했던 코드에서는 path parameter의 이름을 id로 지정했기 때문에 post/1로 접속했다면 useParams hook의 return 값은 {id:1}이 되는 것이다.

// useParams 활용 예시

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

const params = useParams();
// { [path-parameter-name]: value }

useParams로 가져온 path params 값을 활용하면 하나의 컴포넌트에서 다양한 UI를 보여줄 수 있다.