[React] 동적 라우팅

• 동적 라우팅은 Route를 설정할 때 URL의 전체 형태를 미리 정의하는 것이 아니라, 특정 규칙을 정의한 후 규칙에 부합하는 URL의 경우에는 해당 element를 보여주게 설정한다.

동적 라우팅 구현 방법

Route 컴포넌트의 path prop에 : 기호를 활용
경로/:문자열 형태로 path를 설정하면 URL에서 경로/ 뒤에 글자가 오면 이 Route로 연결해준다.

//Router 컴포넌트- 동적라우팅

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

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<List />} /> // 정적 라우팅
        <Route path="/detail/:id" element={<Detail />} /> //동적 라우팅
      </Routes>
    </BrowserRouter>
  );
}

Router 설정으로는 현재 어떤 URL로 들어와도 동일한 UI를 보여줌
이를 해결해주는 것이 바로

path parameter

: 기호 뒤에 붙는 id 와 같은 문자열 (자유롭게 설정 가능)
URL에 있는 값을 마치 함수의 매개변수(parameter)처럼 사용하여
큰 틀은 동일하되 다른 UI를 보여주도록 처리할 수 있다.

ex.
path= "/detail/:id"
path parameter의 이름= id
detail/1= id라는 이름으로 1이라는 값이 전달

useParams hook

path parameter의 값을 편하게 가져올 수 있게 해주며 마치 state처럼 path parameter의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능 제공

// useParams 활용 예시

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

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

• useParams hook을 호출하면 path params의 값을 객체 형태로 반환
• key: Route에서 설정한 path parameter의 이름
  value: path parameter에 실제로 전달된 값
  ex.
  detail/1=> useParams hook의 return 값은 {id: 1}

활용예시

• 리스트에서 상세페이지로 이동하는 Link 컴포넌트를 사용해 준다. Link 컴포넌트의 to prop에는 /detail/ 뒤에 ID(path params 값)를 path parameter로 담아서 /detail/ Route로 이동시킨다.

//전체 리스트 페이지
      {list.map(({ id, name, email }) => (
          <Link key={id} to={`/detail/${id}`}>
            <p>{name}</p>
            <p>{email}</p>
          </Link>
        ))}

• 전체 리스트 페이지에서 상세페이지로 이동시 path parameter에 detail의 ID를 포함해서 라우팅을 시켜줬기 때문에, 상세페이지에서는 useParams hook을 이용해서 path parameter의 값을 가져온 뒤 이를 이용해서 API를 호출한 결과를 통해서 UI를 만들어낸다.

//상세 페이지
const Detail = () => {
  const params = useParams(); // 1
  const detailId = params.id; // 2

  const [detail, setDetail] = useState({});

  useEffect(() => {
    fetch(`https://reqres.in/api/users/${detailId}`) // 3
      .then((response) => response.json())
      .then((result) => setDetail(result.data));
  }, [detailId]); // 4

  const { name, email } = detail;

  return (
      <article>
        <p>{name}</p>
        <p>{email}</p>
      </article>
  );
};

상세 페이지 코드 설명
1. useParams hook을 이용해 params 객체를 가져온다.
2. params 객체 안에서 id 프로퍼티(path parameter의 이름)의 value를 detailId 변수에 할당한다.
3. detailId값을 활용하여 동적으로 호출할 API URL을 결정한다.
4. useEffect의 의존성 배열에 detailId를 포함시켜 detailId 값이 변경될 때마다 새롭게 API를 호출하고 detail state를 변경해서 Detail 컴포넌트가 새로운 UI를 보여주게 한다.
( Router 설정은 path parameter가 변경되더라도 똑같은 Detail 컴포넌트가 보이도록 되어있음)