드디어 진짜 힘들었던 Search 페이지 제작...
화면을 어떻게 짜야할까 엄청 고민했다.
검색 후 결과를 띄울 때에 기존에 만들었던 영화, tv 슬라이더 컴포넌트를 재사용할지,
아니면 새로 만들어서 다시 띄울지 엄청 고민했다..
결론은. 넷플릭스 클론코딩이니 기왕 할꺼 진짜 비슷하게하자 싶어 후자로 선택했다.
그럼, 새로 만들거면 영화 따로 tv 따로만들어야하나?
??? : 당근ㅋ
// -Search.tsx
// 헤더에서 useForm 통해 보냈던 키워드(검색내용) 받아오기
const location = useLocation();
const keyword = new URLSearchParams(location.search).get("keyword");
useQuery
의 enabled
옵션을 발견했다!enabled
는 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.// -Search.tsx
const { data: movie_Data, refetch: movie_refetch } = useQuery<IGetSearch>(
["search", "movie"],
() => getSearchMovie(keyword!),
{ enabled: !!keyword }
);
const { data: tv_Data, refetch: tv_refetch } = useQuery<IGetSearch>(
["search", "tv"],
() => getSearchTv(keyword!),
{
enabled: !!keyword,
}
);
console.log
로 쿼리값 찍어가면서 interface 적고있는데.... 쓸데없이 fetch 가 여러번 나고 있는게 거슬렸다.useEffect
로 가능했다! // keyword가 변경될 때만 movie_refetch()와 tv_refetch()가 실행될 수 있도록
useEffect(() => {
movie_refetch();
tv_refetch();
}, [keyword]);
useNavigate()
, useMatch()
는 이전과 동일하게 사용했다.fetch
후 나온 data.results 는 20개였다..find()
를 사용하면 해결될 문제인데.. 나는 일치하는 값을 어떻게 찾지 하다가 results 의 index 에 접근해버림....useNavigate
를 사용해서 모달창에 내가 선택한 영화 또는 tv 의 id 값을 보내고 있었으니 ..... .find()
를 쓰면 됬던거임.........const [m_Id, setm_Id] = useState<number>();
const onIdtarget = (id: number) => {
setm_Id(id);
};
const Mdata = movieData?.results.find(item => item.id === m_Id);
return (
.
.
.
<S.RowBox
onClick={() => { onIdtarget(data.id); MovieClick(data.id); }}
아래는 동영상