[React] 동적 경로의 종류와 사용법 - URL Parameter와 Query String

이번 글은 동적경로의 종류와 사용법에 대한 글이다.

이번 글의 예제와 연계된 실습 내용을 담은 글은 이번 글 맨 아래에 링크가 첨부되어있다.

---

 

[ 동적 경로(Dynamic Segments) ]

동적인 데이터를 포함하고 있는 경로로 페이지 링크가 아래 예시와 같이 변하면서 다른 페이지를 렌더링할 때 이를 동적경로라고 부른다.

 

---

 

[ 동적 경로의 종류 ]

ex. '~/product/1' (1번 상품 페이지) , '~/product/2' (2번 상품 페이지)

=> 이때 맨 뒤에 오는 숫자에 따라 렌더링하는 상품이 변경됨

=> 1. URL Parameter : 위의 예시 방식으로 /(슬래쉬) 뒤에 아이템의 id를 명시

(잘 변경되지 않는 아이템의 id 등의 값의 주소를 명시할 때 사용됨)

 

<=> 2. Query String : URL Parameter와 다른 방식으로 ? 뒤에 변수명과 값을 명시한다

ex. /product?q=상품명

(검색어 같이 자주 변경되는 값의 주소를 명시할 때 사용됨)

 

 

---

 

[ URL Parameter 사용법 ]

아래 코드와 같이 diary 뒤에 ':id'를 넣어주고 이 뒤에 오는 어떤 값이 존재한다면 무조건 동적경로로 사용된다.

=> diary 페이지의 URL Parameter로 판단된다.

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

 

 

[ URL Parameter로 전달한 값 꺼내오기 ]

Diary 컴포넌트(파라미터를 입력해준 컴포넌트)에 아래 코드를 임포트해준다.

아래 코드에서 임포트한 useParams은 현재 브라우저의 파라미터 값을 가져오는 역할이다.

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

 

아래 코드와 같이 useParams()를 호출하여 결과값을 변수 params에 넣어준다.

const params = useParams();

 

그럼 이제 파라미터로 받은 값이 변수 params에 저장되어 아래 코드와 같이 호출하면 해당 파라미터의 아이디를 호출하는 것을 확인할 수 있다.

ex. 파라미터가 /100일 경우 페이지에 '100번 페이지입니다' 출력

return <div>{params.id}번 페이지입니다</div>;

 

 

---

 

[ Query String 사용법 ]

해당 동적경로가 사용되는 페이지에 아래 코드를 임포트해준다.

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

 

아래 코드와 같이 작성해준다.

params에는 입력해준 파라미터 값이 들어가지고 setParams에는 특정 QueryString을 변경할 수 있는 함수가 들어온다.

const [params, setParams] = useSearchParams();

 

입력해준 파라미터

 

아래 코드와 같이 입력해준 파라미터의 값이 들어있는 변수 params의 value를 가져오면 콘솔창에 'hello'를 출력하는 것을 확인할 수 있다.

console.log(params.get("value"));

 

 

---

https://hwangseoyoung.tistory.com/214

[React] 라우트(Route) - 페이지를 이동시키는 기능

---