[React] 37. 페이지 라우팅 / 동적 경로

서회정

Mar 10, 2026

Contents

1. 동적 경로 2. 동적 경로의 표현 방식 3. 동적 경로 설정 1. URL Parameter 설정 2. Query String 설정

1. 동적 경로

💡

동적 경로는 영어로는 Dynamic Segments라 부르며

동적인 데이터를 포함하고 있는 경로를 말한다.

예를 들어 쇼핑몰의 주소를 보면 상품의 id에 따라

주소에 특정한 id 데이터가 들어가는 걸 볼 수 있는데,

아래의 이미지에서 보면 주소에 있는 각각의 숫자에

해당하는 것을 동적인 데이터라 하며 이런 동적인 데이터가

포함된 경로가 동적 경로이다.

2. 동적 경로의 표현 방식

동적 경로의 표현 방식은 두 가지로 나눌 수 있다.

/ 뒤에 id를 명시하는 URL Parameter 방식,

? 뒤에 변수명과 값을 명시하는 Query String 방식이다.

URL Parameter 방식

아이템의 id 등 변경되지 않는 값을 주소로 명시하기 위해 사용됨

Query String

검색어 등의 자주 변경되는 값을 주소로 명시하기 위해 사용됨

구분	URL 파라미터 (Path Parameter)	쿼리 스트링 (Query String)
형태	`/posts/1`	`/posts?id=1`
위치	URL 경로(path) 안에 포함	`?` 뒤에 key=value 형태로 전달
목적	특정 자원(Resource) 식별	필터, 옵션, 조건 전달
여러 값 전달	보통 경로에 순서대로 추가 (`/users/10/posts/5`)	`&`로 여러 값 전달 (`?page=1&sort=latest`)
REST 스타일	REST API에서 권장되는 방식	보조적인 파라미터 전달에 사용
React Router 사용	`useParams()`	`useSearchParams()`

3. 동적 경로 설정

1. URL Parameter 설정

먼저 동적 경로를 사용하고자 하는 페이지의 라우트 컴포넌트에

다음과 같이 내용을 추가해주자.

기존 경로 뒤에 /:id 와 같이 이곳에 id라는

파라미터로 들어간다는 것을 명시할 수 있다.


<Route path="/diary/:id" element={<Diary />} />

여기까지 설정해주고 나면 이제 diary/ 뒤에 어떤 값이 들어와도

기존의 다이어리 페이지를 렌더링해준다.

다음으로 동적 경로만 받을 Diary 컴포넌트에 가서

react-router-dom에서 제공하는 커스텀 훅인

useParams를 불러와주자.

이 useParams라는 훅은 동적 경로에 포함된

동적 데이터를 꺼내올 수 있도록 도와준다.


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

컴포넌트 내부에서 useParams 함수를 호출하여

params라는 변수에 할당하고 이를 콘솔에 그대로

출력하면 url 파라미터에 들어간 동적 데이터 값을

확인할 수 있다.


const params = useParams();
console.log(params);

이를 활용하면 다음과 같이 값을 꺼내어 사용할 수도 있다.


return <div>{params.id}번째 일기입니다</div>;

2. Query String 설정

현재 프로젝트에서는 사용하지 않지만

사용법은 보다 간단하기 때문에 사용법만 알아보자.

경로를 설정했던 Route 컴포넌트에서는 별도로

설정을 바꿀 필요는 없다.

그리고 동적인 경로를 받을 페이지에 들어가

커스텀 훅인 useSearchParams를 불러와주고


import { useSearchParams } from "react-router-dom";

state를 사용할 때 처럼 동적 데이터가 들어올

변수 자리와 그 데이터를 변경하는 함수를 받아줄 수 있다.

그리고 key값으로 들어간 값도 꺼내어 사용할 수 있다.


const [params, setParams] = useSearchParams();
console.log(params.get("value"));