리액트 쿼리스트링

가오리·2023년 11월 21일
0

FrontEnd

목록 보기
9/20
post-thumbnail

리액트 쿼리스트링

쿼리스트링이란?

  • 쿼리스트링은 URL의 한 부분이며 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다.
  • 쿼리스트링은 이름 그대로 문자열 타입이며 key = value로 표현된다. 또한 URL의 일부로 쿼리스트링의 시작점은 "?" 으로 표시된다.
  • 예시)https://www.example.com/products?sort=popular
  • &로 시작 key=value

react-router-dom에서 쿼리 스트링 사용하기

  • Link나 navigate로 쿼리 스트링 값 보내기
<Link to="/list?sort=popular" />
 
navigate("/list?sort=popular")
  • 컴포넌트에서 쿼리 스트링 값 가져오기
const location = useLocation();
const queryString = location.search;

const [searchParams, setSearchParams] = useSearchParams();
profile
가오리의 개발 이야기

0개의 댓글