React Router Hooks

React Router 에서는 자체적으로 여러가지 Hook을 제공한다.

https://reactrouter.com/en/main (참고)

이 글에서는 아래 useSearchParams Hook에 대해서 알아보겠다.

useSearchParams

useSearchParams 훅은 현재 위치의 URL에서 쿼리 문자열을 읽고 수정하는 데 사용된다.
URL 뒤의 ? 로 시작되는 문자열을 쿼리 문자열이라고 한다.
각 쿼리 문자열은 Key = Value 로 쌍을 이루고 있으며 배열로 반환한다.
두개 이상의 쿼리 문자열이 존재할 경우 & 로 연결한다.

useSearchParams 선언

useState와 비슷한 형태로 선언한다. useState 와 마찬가지로 setSearchParams 를 지원한다.

const [ searchParams , setSearchParams ] = useSearchParams();

useSearchParams 메서드

메서드	설명
searchParams.get(key)	해당 key의 value 를 가져온다.
searchParams.getAll(key)	해당 key의 모든 value를 가져온다.
searchParams.set(key, value)	해당 key에 value를 설정한다. (이미 값이 있는 경우 교체)
searchParams.append(key, value)	해당 key에 value를 추가한다.
searchParams.delete(key)	해당 key를 제거한다.
searchParams.has(key)	해당하는 key가 있는지 확인한다. (존재할 경우 true)

---

App.jsx 코드

링크를 이용해서 쿼리 문자열 URL로 이동하게 만든다.

import { Route, Routes } from 'react-router-dom'
import Home from './components/Home'
import { Link } from 'react-router-dom'

import './App.css'

function App() {
 const Linkpage=()=>{
   return(
     <>
     <Link to='/home?id=123&id=abc&name=CHR'>Home1</Link>
     </>
   )
 }

 return (
   <div>
     <Linkpage/>
     <Routes>  
       <Route path='/home/*' element={<Home/>}/>
     </Routes>
 </div>
 )
}

export default App

Home.jsx 코드

useSearchParams 을 이용하여 key와 value를 가져온다.

import {useSearchParams} from 'react-router-dom'

function Home() {
    const [pa,setPa] = useSearchParams();
    const id = pa.get("id");
    const idAll = pa.getAll("id");
    const name = pa.get("name");
    const nameAll = pa.getAll("name");
    


    function handleSetName(){
        pa.set("name","HEllO")
        setPa(pa) };

    function handleAppendName(){
        pa.append("name","Bye")
        setPa(pa) }



    return (
        <div>
        <p>id : {id}</p>
        <p>idAll : {idAll}</p>
        <p>name: {name}</p>
        <p>nameAll: {nameAll}</p>
        <button onClick={handleSetName}>설정</button>
        <button onClick={handleAppendName}>추가</button>
            
        </div>
    )
}

export default Home