프로그래머가 되는 꿈

useSearchParams (5-5) 본문

프론트엔드 (Front-end)/React

useSearchParams (5-5)

AI박사 2026. 1. 16. 19:25

search 조건

?하고 뒤에 조건이 들어가지 않았어?

쿼리(q) 뒤에 들어가지 않았어?

&(end)연산 뒤에 page 넘버

 

? 뒤에 들어가는 조건들을 쿼리라고 한다!!!!

(내가 검색같은걸 할 때?)추가적인 조건,정보를 보낼 때 사용한다.

 

이 쿼리도 url에서 읽어올 수 있을까?

 

<?뒤의 값 읽어오자`~~~>

 

onClick함수(?)

9. Product 페이지로 갈건데 내가 (약간의) 검색 조건을 추가했다고 가정을 해보자!

검색 조건에서 pants, 바지만 보여달라고 검색 조건을 추가했다고 가정해보자.

 

클릭하면

? 쿼리 뒤에 있는 값은 url 경로에 영향을 미치지 않는다.

그냥 optional, 선택적인 (추가적인) 정보임!

뒤에 아무리 붙여도 변화 X

 

?앞쪽에 추가하면,

url 파라미터 값을 여러개를 붙이면,

/(슬래시)들에 많 추가하면....

아무 결과도 안나옴

왜냐하면, 이건 경로 자체가 달라져 버린 것이기 때문!

 

이게 바로 쿼리와 파라미터의 차이!!!

 

이제 이 뒤에 있는 값을 어떻게 읽어오지 한번 해보자구요!!!

 

useSearchParams는 리액트 useState와 비슷하게 동작한다.

6번. query를 console.log할건데 이중에서 q 쿼리에 있(었)던 값을 가져와주세요

 

 

 

useSearchParams라는 훅을 이용해서 query에다가 get, 값을 가져온다 . 왜냐하면 query의 값이 여러개잖아. q가 될수도 있고 page가 될 수도 있고, num이 될 수도 있고... - 가지고 오고 싶은 것을 딱 명시를 해주면 그 값을 가져오게 된다.

 

 

 let [query, setQuery] = useSearchParams(); (// array로 반환)
 console.log("dddd", query.get("page"));

쿼리 값은 이렇게 가져오는 거구나! - 문법 기억하기!

'프론트엔드 (Front-end) > React' 카테고리의 다른 글

Zustand (1)  (0) 2026.01.27
redirect (5-6) <가면은 안되는 페이지> - 보호해주어야 하는 페이지  (1) 2026.01.17
useParams (5-4)  (0) 2026.01.16
RESTful Routes URL 디자인 (5-3)  (0) 2026.01.16
5-3  (0) 2026.01.16