WEB/React

[React] 동적경로 - useParams, useSearchParams

스용공주 2025. 4. 19. 13:53
728x90
728x90

이번 글은 상황에 따라 경로가 변경되는 동적경로를 생성하는 내용이다.

 

[ 동적경로 ]

=> URL Parameter : 아이템의 id 같이 변경되지 않는 값을 주소로 명시하기 위해 사용

=> Query String : 검색어 등의 자주 변경되는 값을 주소로 명시하기 위해 사용

 

 

[ URL Parameter ]

아래 코드와 같이 /:id를 작성해주면 URL Parameter가 되어 diary의 뒤에 아이디가 오면 해당 페이지의 동적 경로로 판단됨

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

 

 

useParams를 통해 현재 브라우저에 명시한 URL 파라미터의 값을 가져올 수 있게 됨

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

 

useParams()을 통해 현재 들어온 id의 값을 변수에 저장하고 해당 변수의 id를 호출하면 아래 사진과 같은 결과를 얻을 수 있다.

const Diary=()=>{
    const params= useParams();

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

id 값으로 받아온 것을 확인할 수 있다.

 

 

 

[ QueryString ]

? 뒤에 변수명과 값을 명시해준다 (?value=hello)

 

useSearchParams를 임포트해준다.

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

 

params은 QueryString의 값, setParams은 특정 QueryString을 수정할 함수가 들어있는 것

const [params, setParams]= useSearchParams();
import { useSearchParams } from "react-router-dom";

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

    return <div>Home</div>
}

export default Home;

QueryString이 전달된 params의 value를 가져오면 입력한 hello를 가져오는 것을 확인할 수 있다.

 

728x90
728x90