Router - URL파라미터/ 쿼리스트링

URL파라미터와 쿼리스트링

리액트에서 페이지 주소를 정의할 때 유동적인 값을 사용해야 하는 경우가 있다.

URL파라미터와 쿼리스트링을 사용하면 된다.

• URL 파라미터 : /profile/velopert
  URL파라미터는 주소의 경로에 유동적인 값을 넣는 형태이다.
  URL파라미터가 여러개인 경우에는 /profiles/:username/:filed형태로 사용가능하다

const App = () => {

  return (
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/profile/:username' element={<Profile/>}/>
    </Routes>
  )
}

export default App;

 

• 쿼리스트링 : /articles?page=1&keyword=react 
  쿼리스트링은 주소 뒷부분에 ?문자열 이후에 key=value형태로 값을 넣고 &로 구분하는 형태이다.
  useLocation Hook 사용 쿼리스트링 값을 사용하려면 ?을 지운 뒤, &로 문자열을 분리하고, key와 value를 파싱하는 과정이 있어야 한다. useSearchParams Hook을 사용해 쿼리스트링을 쉽게 다룰 수 있다
  
  
• useSearchParams()

1. useSearchParams는 배열 타입의 값을 반환
   첫 번째 원소 : 쿼리 파라미터를 조회하거나 수정하는 매서드 객체 반환(.get메서드 : 조회 / .set메서드 : 업데이트)
   두 번째 원소 : 쿼리 파라미터를 객체 형태로 업데이트 하는 함수 반환
   
   
2. 쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이다
   true / false : 'true'와 Boolean형은 따옴표로 감싸서 비교 해야하고,
   숫자를 다룬다면 parseInt를 사용하여 숫자 타입으로 변환해아 한다.

import { Link, useLocation, useSearchParams } from "react-router-dom"

const About = ()=>{
  // const location = useLocation()
  const [searchParams, setSearchParams] = useSearchParams()
  const detail = searchParams.get('detail')
  const mode = searchParams.get('mode')

  const onToggleDetail = ()=> {
    setSearchParams({mode, detail : detail === 'true' ? false : true})
  }
  const onIncreaseMode = ()=> {
    const nextMode = mode === null? 1 : parseInt(mode) + 1
    setSearchParams( {mode: nextMode, detail})
  }
  return (
    <>
      <h1>소개</h1>
      <p>리액트 라우터를 사용해 보는 프로젝트</p>
      <Link to='/'>돌아가기</Link>
      {/* <p>쿼리스트링 : {location.search}</p> */}
      <p>쿼리스트링 쪼개기!</p>
      <p>detail: {detail} </p>
      <p>mode: {mode} </p>
      <button onClick={onToggleDetail}> Toggle BTN </button>
      <button onClick={onIncreaseMode}> mode + 1 </button>
    </>
  )
}

export default About

 

 

 

 

https://github.com/thdud2262/velopert_react

GitHub - thdud2262/velopert_react