1. 동적 라우팅(Dynamic Routing)
- React에서 라우팅을 설정하는 가장 기본적인 방법은 Router 컴포넌트에서 사용할 수 있는 경로들과 해당 경로로 접속했을때 보여줄 컴포넌트를 모두 정의해두는 방식으로 사용하고 있는데, 이를 정적 라우팅(static Routing) 이라한다. 하지만 복잡하고 규모가 큰 애플리케이션을 개발할땐 경로를 미리 설정해두는 방식만으로도 경로를 수정하거나 유지보수등과 같은 코드 처리가 힘든 상황이 생길 수가 있다는 점이 단점이다.
예를 들어서 밑에 있는 Route 컴포넌트 코드를 보면 다음과 같다.
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<ListComponent />} /> // 1
<Route path="/post/1" element={<FirstPosting/>} /> // 2
<Route path="/post/2" element={<SecondPosting/>} /> // 3
</Routes>
</BrowserRouter>
);
}
export default Router;
- 포스팅 목록들을 볼 수 있는 리스트 페이지
- 첫번째 포스팅 내용을 볼 수 있는 상세 페이지 (post : 1)
- 두번째 포스팅 내용을 볼 수 있는 상세 페이지 (post : 2)
일반적으로 리스트 페이지의 루트를 / 로 설정하고 상세 페이지를 /post/[포스트의 ID]로 정해서 /post/1로 들어가면 post 1번 게시물을 /post/2로 접속하면 post 2번 게시물을 보여주는 방식으로 되어있는데 대체적으로 Route 컴포넌트는 위와 같이 유사한 형태를 띄게 된다.
다만, 포스팅 페이지가 한 두개일경우 크게 문제가 안되지만 포스트 페이지가 점점 늘어나서 만약 10000개의 포스트가 쌓였다면 /post/1~10000의 Route를 Router 컴포넌트에 일일이 설정해줘야 하며, 만약 포스팅 컴포넌트의 Route를 수정하거나 삭제할땐 다시 Router 컴포넌트에서 해당 Route를 삭제해줘야 하는 번거로움이 있다. 결론적으론 정적 라우팅은 Route를 유연하게 정의할 수 없다는 단점을 가지고 있다.
이와 같은 문제를 해결하기 위해서 나온 라우팅의 개념이 동적 라우팅(Dynamic Routing) 이다. 그러면 동적 라우팅이란? 정적 라우팅 처럼 Route를 설정할때 URL의 전체 형태를 미리 정의하는 것이 아니라 특정 규칙을 정의한후 규칙에 부합하는 URL의 경우에는 해당 element를 보여주게 설정하는 방식으로 사용되는것이 동적 라우팅이다. 예를들어 정적 라우팅은 post/1, post/2 처럼 1,2와 같은 숫자까지 포함해서 URL의 전체 형태로 띄웠는데 이제는 /post/ 로 시작하는 모든 URL은 상세페이지로 연결되게 설정하는 방식을 사용하게 된다.
동적 라우팅을 사용하게 되면 post/1, post/100, post/10000 등과 같이/post/ 로 규칙을 만족하는 모든 URL에 대해서 상세페이지로 모두 연결시킬 수 있기 때문에 포스트를 추가하거나 삭제되는 등 변동이 생기더라도 Router 컴포넌트를 직접 수정하지 않아도 된다.
2. 동적 라우팅 구현 방법
- 동적 라우팅은 일반 Router 컴포넌트에서 사용하는 react-router-dom 이라는 라이브러리를 이용해서 구현하는 방법이 있다. 다음은 react-router-dom가 설치된 프로젝트를 예시이다.
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<ListComponent />} />
<Route path="/post/:id" element={<DetailPageComponent />} />
</Routes>
</BrowserRouter>
);
}
export default Router;react-router-dom 에서 동적 라우팅을 구현하는 방법은 path prop에 : 기호를 활용하고 그 옆에 각각의 post 페이지마다 부여되는 id를 넣어주면 된다. 경로/:문자열(id) 형태로 path를 설정하면 URL 에서 경로/ 뒤에 무슨 글자든 숫자가 오든 이 Route로 연결되는 것이다. 특히 위에 있는 Router 컴포넌트 예시 코드 처럼 이와 같이 Route를 설정하게 되면 뒤에 어떠한 글자가 와도 모두 상세페이지 컴포넌트를 보여주게 된다. 즉, post/1, post/100, post/10000, post/test 모두 상세페이지 컴포넌트로 연결되어 일일이 Router 컴포넌트에서 수정하거나 삭제하지 않아도 된다는 뜻임을 알 수 있다. 여기서 : 기호 뒤에 id와 같은 문자열이 바로 path parameter 라고 한다.
3. Path Parameter
- path Parameter는 URL에 있는 값을 매개변수(인자 : parameter) 처럼 사용하는 것이다. 즉, 똑같은 함수에 다른 매개변수를 통해서 다양한 결과를 낼 수 있는 것처럼 path parameter를 통해서 큰 틀은 동일하되 다른 UI를 보여주도록 처리할 수 있다. 우리가 함수에서 매개변수의 이름을 자유롭게 지을 수 있는 것 처럼 path parameter도 이름을 자유롭게 작성할수 있다.
예를들어 /post/:id 라고 path를 설정했고 그 이름을 id 로 매개변수 이름을 넣었는데 결과적으로 유저가/post/1로 접속하면 이id라는 이름은 1 이라는 값으로 전달된 것이다. 만약에 10000 으로 접속하면 이 id의 값은 10000 이라는 값으로 전달된 것 이다. 이렇게 컴포넌트 안에서 path parameter로 전달된 값을 이용해 특정한 처리를 하는 코드를 작성했다면, 동일한 컴포넌트에서 다양한 UI를 보여줄 수 있게 되는 것이다.
4. Path Parameter 활용 방법
- path parameter를 활용하면 동적 라우팅을 하면서 다른 UI를 보여줄 수 있다. 이제는 이 react-router-dom에서 어떻게 path parameter의 값을 가져올 수 있는지 알아보자
4-1) useParams Hook 사용하기
- useParams hook은 path parameter의 값을 편하게 가져올 수 있게 해주며, state처럼 path parameter의 값이 바뀌면 컴포넌트를 리렌더링 해주는 기능을 제공한다.
// useParams 활용 예시
import React from "react";
import { Link, useParams } from "react-router-dom";
const Detail = () => {
const params = useParams();
const id = params.id;
return (
<section>
<h1>This is Detail Page</h1>
<h2>path parameter:{id}</h2>
<Link to="/">Go Back To List Page</Link>
</section>
);
};
export default Detail;- useParams hook을 호출하면 path params의 값을 객체 형태로 반환한다. 이때 객체의 프로퍼티의 key는 Route에서 설정한 path parameter의 이름이며 value는 path parameter에 실제로 전달된 값이다. 즉, 블로그 애플리케이션에서는 path parameter 이름을
id로 지정을 했기 때문에post/1로 접속했다면? useParams hook의 return 값은{id: 1}이 된다.
