useSearchParams(); q 쿼리값을 읽어 오는 녀석 활용하기

< 코드 >

const [query,setquery]=useSearchParams();

  const getProducts= async () =>{

    let searchQuery = query.get('q')||"";

    let url = `http://localhost:5000/products?q=${searchQuery}`

    let response = await fetch(url)

    let data = await response.json()

    setProductList(data)

  }

  useEffect(()=>{

      getProducts()

  },[query])

 

 

빠르게 익히기

---

 

useSearchParams 은 use State 처럼 사용된다.

 

우리가 검색창에 "드레스"를 검색하면 해당 "드레스"라는 키워드를 읽어져 검색이 되야한다.

 

let searchQuery 라는 변수안에 query값 . get 가져오다 ('q')를, 만약 없으면  " " 공백처리

 

이 문장으로 보아 useSearchParams 은 우리가 검색한 키워드를 가져오는 역할이라 할 수 있다.

 

그럼 우리가 링크를 읽어올때 변수를 q뒤에 담아주면 해당 키워드가 담겨지게 된다.

 

주의 할점은 useEffect 를 사용할때 키워드는 "드레스" , "원피스" 이렇게 동적으로 움직이니까

대괄호 [  ]안에 query를 줌으로써 변할때마다  새로 읽어줘라는 표식을 줘야한다.

 

useEffect는 맨처음에만 작동하기 때문에 이런점을 유용하게 사용할 수 있다.

 

---

사실 이해하는데로 작성했는데 어려운  부분이 있따..

물론  이렇게 작동하는 원리인걸  알지만 계속 반복 연습이 필요하니

적어두고 두고두고 봐야지