리액트 쿼리스트링

리액트 쿼리스트링

쿼리스트링이란?

• 쿼리스트링은 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();