[React] 동적 라우팅
동적 라우팅
동적 라우팅이란 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 의미합니다.
보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와
거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지
로 구성되는데, 이 때 동적 라우팅이 사용됩니다.
위의 예시에서는 step 이 1인 데이터들을 렌더링 해주는 것을 볼 수 있습니다.
동적 라우팅 구현
1. Path Parameter
localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125
위의 예시에서 라우트 경로 끝에 다른 id 값들이 들어가는 것을 볼 수 있습니다. 2
, 45
, 125
와 같이 url 경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter 라고 합니다.
백준을 예시로 볼 때, 이 Path Parameter는 Router 컴포넌트에서 다음과 같이 정의됩니다.
// Router.js
<BrowserRouter>
<Routes>
<Route path='/problem/**:id**' element={<ProblemDetail />} />
</Routes>
</BrowserRouter>
path 부분을 설명하자면
:
는 Path Parameter 가 올 것임을 의미합니다id
는 해당 Path Parameter를 의미합니다. 이 값은 변수명과 같으므로 임의로 이름을 지정할 수 있습니다. ex):problemId
Router 컴포넌트의 path 프로퍼티에 :id
를 통해 Path Parameter를 명시 해준 후, 동적 라우팅이 동작되는 흐름을 먼저 살펴보겠습니다.
-
문제 목록에서 문제를 선택하게 되면, onClick 이벤트에 useNavigate 훅을 통해
/problem/2557
로 이동하게 됩니다. URL이/problem/2557
로 변하게 되면 Router.js에서 설정해 두었던 path 프로퍼티에 따라 ProblemDetail이 마운트 됩니다. -
ProblemDetail 컴포넌트에서는 백엔드 측에 id 값이
2557
인 문제에 대한 정보를 요청합니다. -
응답받은 데이터를 setState 함수를 통해 저장하고, 이를 통해 디테일 페이지가 렌더링 됩니다.
2번 스텝에서, ProblemDetail 컴포넌트의 useEffect 훅을 통해 백엔드에 해당 id에 대한 문제데이터 요청을 보냈습니다. 그런데 이 id값을 ProblemDetail은 어떻게 가져올 수 있었을까요? 정답은 useParams 훅에 있습니다.
2. useParams Hook
useParams
훅은 다음과 같이 사용합니다.
// ProblemDetail 컴포넌트
// 현재경로: /problem/2557
function ProductDetail(props) {
const params = useParams();
console.log(params);
return (
...
)
}
useParams
훅을 실행하게 되면 Path Parameter 정보를 담고 있는 객체
를 반환하게 됩니다. 위 코드에서는 해당 객체를 params 라는 변수에 할당해 주었는데요, params를 출력 시 아래 와 같이 출력됩니다.
{
id: 2557
}
여기서 객체의 id
라는 키네임은 Router.js 에서 :id
로 표기해준 값입니다. 만약 저 부분을 :problemId
로 변경 시 출력되는 값은
{
problemId: 2557
}
나오게 됩니다.
정리하자면
useParams를 통해 url로 넘어온 id 값을 ProblemDetail 컴포넌트에서 가져올 수 있었습니다.
3. useParams().id
// ProblemDetail 컴포넌트
// 현재경로: /problem/2557
function ProductDetail(props) {
const params = useParams();
useEffect(() => {
fetch(`http://백준/problem/${params.id}`)
.then(res => res.json())
.then(res => setData(res));
},[]);
return (
...
)
}
위와 같이 useEffect
훅에서 useParams
로 받아온 id
값을 통해 서버에 요청을 보내 원하는 정보를 받아올 수 있었습니다.
Author And Source
이 문제에 관하여([React] 동적 라우팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seokkitdo/React-동적-라우팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)