프로그래머가 되는 꿈
useSearchParams (5-5) 본문

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 |