052. React - 페이지 라우팅 - 동적 경로

동적 경로(Dynamic Segment)란?

예를 들어 쇼핑몰에서 1번 상세페이지는 /product/1, 2번 상세피이지는 /product/2가 붙는 것처럼 동적으로 경로가 생성되는 것을 의미함.

동적 경로의 방식 2가지

URL Parameter

/ 뒤에 id를 명시하는 방법.

아이템의 id와 같이 변경되지 않는 값을 고유의 경로로 설정하기 위해 사용함.

~/product/1
~/product/2
~/product/3

Query String

? 뒤에 변수명과 값을 명시하는 방법.

포털 사이트에서의 검색어와 같이 수시로 변경되는 값을 주소로 명시하기 위해 사용함.

~/search?q=검색어

URL Parameter 사용 방법

1. Route path에 :id 명시하기

<Route path="/detail:id" element={<Detail/>} />

2. 해당 컴포넌트로 가서 usePrams 커스텀 훅 import 하기

// Detail.jsx
import { useParams } from "react-router-dom";

3. 값이 잘 넘어 오는지 변수에 담아서 확인하기

function Detail() {

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

    return(
        <>
        <div>이 페이지는 {params.id}번째 상세페이지입니다.</div>
        </>
    );
}

Query String 사용 방법

1. 사용하고자 하는 컴포넌트에서 useSearchParams 커스텀 훅 import 하기

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

2. useState 훅 사용 하듯 정의하기

function Detail() {

const [params, setParams] = useSearchParams();

    return;
}

3. 잘 가져오는지 확인하기

function Detail() {

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

    return;
}