NETFLIX CLONE(React)(3) - Search

이제 서치를 해보자

서치는 별거 없다 search에 대한 api가 있어서 

그냥 정보 불러서 보여주기만 하면 된다.

---

Header에서 만들었던 input form을 사용한다.

그때 이미 얼추 정보 넘기기는 해줬었다.

//Header
...
const { register, handleSubmit } = useForm<IForm>();
const onValid = (data:IForm) => {
    navigate(`/search?keyword=${data.keyword}`)
}
...

//Search
import { useLocation } from "react-router";

function Search() {
  const location = useLocation();
  const keyword = new URLSearchParams(location.search).get("keyword");
  ...

 

URLSearchParams

URL의 파라미터 값을 확인하고 싶을 때 사용한다.

const params = new URLSearchParams('?a=aaa&b=bbb');
// 가져오고 
console.log(params.get('a')); // aaa 
// 추가하고 
params.append('c', 'ccc'); 
console.log(params.get('c')); // ccc
// 제거하고 params.delete('c'); 
console.log(params.get('c')); // null
// 확인할 수 있다. 
console.log(params.has('a')); // true
// 쿼리 문자열로 변환도 가능하다
console.log(params.toString()); // ?a=aaa&b=bbb

 

 

이제 또 데이터를 이용해보자!!

사실 저번에 했던 box와 똑같다 hover시 애니메이션과 정보 보여주기 등등등.

const {data, isLoading} = useQuery<IGetMoviesResult>(["searchMovie", keyword], ()=> getSearchInfo(keyword as string));

왜 Movie꺼를 가져왔냐면 Movie에는 adult가 있는데 Tv에는 없어서 그냥 포함시켜서 가져왔다.

 

 

예쁘게 재배치만 다시 해주쟈