1. 동적 라우팅이란?
- 특정 규칙을 정의한 후 규칙에 부합하는 URL이 있을경우 해당하는 element를 보여주게 설정
1-1. 동적 라우팅의 필요성
- /post/ 로 시작하는 모든 url은 상세페이지로 연결되게 설정하는 방식으로 애플리케이션을 확정성 있게 만들 수 있다.
- post가 변경이 생기더라도 router컴포넌트를 직접 수정하지 않아도 된다.
2. react-router-dom 동적 라우팅 구현
-
동적 라우팅을 구현하는 방법은 Route 컴포넌트의 path prop에 : 기호를 활용한다.
-
'경로/:문자열' 형태로 path를 설정하면 URL에서 경로/ 뒤에 무슨 글자가 오든 이 Route로 연결된다.
mport 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={<DetailPageComponent />} />
</Routes>
</BrowserRouter>
);
}경로 뒤에 콜론을 입력하고 그 뒤에 문자열 형태로 path를 설정하면 경로뒤에 어떠한 내용이 오더라도 이 Router로 연결이 돼 Detail 컴포넌트를 보여주게 된다.
3. 동적 라우팅과 Path Parameter
동적 라우팅의 최종 목표는 유저가 /post/1로 접속하면 1번 내용을, /post/2을 접속하면 2번내용을 각각 보여줄 수 있게 하는것이다. 이때 필요한것이 path parameter이다. path parameter는 URL의 값을 마치 매개변수(parameter)처럼 사용하게되는데, 하나의 함수에서 각각 다른 매개변수를 통해 각기 다른 결과를 내는것처럼 path parameter도 내부 틀은 동일하되 각기 다른 UI를 보여주도록 처리할 수있다.
그렇다면 react-router-dom에서 어떻게 path parameter의 값을 가져올 수 있을까?
3-1 useParams hook
useParams hook은 path parameter의 값을 편하게 가져올 수 있게 해주며 마치 state처럼 path parameter의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공해 준다.
3-2 활용예시
//Router.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import List from './pages/List';
import Detail from './pages/Detail';
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<List />} />
<Route path="/detail/:id" element={<Detail />} />
</Routes>
</BrowserRouter>
);
};
export default App;Router에서 리스트 페이지와 상세 페이지에 대한 Route를 정의해야 한다. 이때, 상세 페이지는 동적 라우팅을 통해서 경로를 지정해 준다.
// List.js
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
const List = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('https://reqres.in/api/users')
.then((response) => response.json())
.then((result) => setUsers(result.data));
}, []);
return (
<section>
<nav>
{users.map(({ id, first_name, email, avatar }) => (
<Link key={id} to={`/detail/${id}`}>
<p>
<strong>{first_name}</strong>
</p>
<p>{email}</p>
<img alt="avatar" src={avatar} />
</Link>
))}
</nav>
</section>
);
};
export default List;List 컴포넌트에서는 전체 유저 리스트를 보여준다. 리스트에서 특정 유저를 클릭하면 해당 유저의 상세페이지로 이동하도록 Link 컴포넌트를 사용해 준다. Link 컴포넌트의 to prop에는 /detail/ Route로 이동시키되, /detail/ 뒤에 현재 클릭한 유저의 ID를 path parameter로 담아서 이동시킨다.
// Detail.js
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
const Detail = () => {
const params = useParams(); // 1
const userId = params.id; // 2
const [user, setUser] = useState({});
useEffect(() => {
fetch(`https://reqres.in/api/users/${userId}`) // 3
.then((response) => response.json())
.then((result) => setUser(result.data));
}, [userId]); // 4
const { first_name, email, avatar } = user;
return (
<section>
<article>
<p>
<strong>{first_name}</strong>
</p>
<p>{email}</p>
<img alt="avatar" src={avatar} />
</article>
</section>
);
};
export default Detail;상세페이지에서는 단일 유저의 정보를 보여준다. 유저에 대한 정보는 /api/users/[user의 ID] API를 통해서 가져온다. 이 API를 활용하기 위해서는 현재 상세페이지에서 보여줘야 하는 user의 ID를 알고 있어야 한다. 이 애플리케이션에서는 리스트 페이지에서 상세페이지로 이동시킬 때 path parameter에 user의 ID를 포함해서 라우팅을 시켜줬기 때문에, 상세페이지에서는 useParams hook을 이용해서 path parameter의 값을 가져온 뒤 이를 이용해서 API를 호출한 결과를 통해서 UI를 만들어냅니다.
- useParams hook을 이용해 params 객체를 가져온다.
- params 객체 안에서 id 프로퍼티의 value를 userId 변수에 할당한다.
(동적 라우팅을 설정할 때 path parameter의 이름을 /detail/:id로 설정했기 때문에 id 프로퍼티에 접근)- useEffect를 안에서 API 호출을 진행한다.
- 호출할 API URL을 결정할 때 userId값을 활용하여 동적으로 API URL을 결정하고 있다.
- path parameter가 변경되더라도 다른 컴포넌트가 보이는 것이 아니라 똑같은 Detail 컴포넌트가 보이도록 Router에서 설정이 되어있으므로, userId 값이 변경될 때마다 새로운 user의 정보를 Detail 컴포넌트에 보여주기 위해서 useEffect의 의존성 배열에 userId를 포함시켜준다.
- 의존성 배열에 userId를 넣어줌으로서 userId의 값이 변경될 때 마다 새롭게 API 호출을 하고 user state를 변경해서 새로운 UI를 보여줄 수 있게 되었다.
