Netfilx Clone #7 Search page..힘들었따

드디어 진짜 힘들었던 Search 페이지 제작...

---

Search - useQuery 'enabled'

화면을 어떻게 짜야할까 엄청 고민했다.
검색 후 결과를 띄울 때에 기존에 만들었던 영화, tv 슬라이더 컴포넌트를 재사용할지,
아니면 새로 만들어서 다시 띄울지 엄청 고민했다..

결론은. 넷플릭스 클론코딩이니 기왕 할꺼 진짜 비슷하게하자 싶어 후자로 선택했다.

1. 검색 전, 그러니까 keyword 값이 없을 때에는
   화면 중앙에 " 돋보기 모양을 클릭하여 검색하세요!"띄운다.
2. keyword 값이 들어오면 검색 결과를 검색창 하단에 띄운다.
3. 영화는 상단에 tv(series)는 하단에 띄우고 결과 값은 갯수는 제한없이 다 띄운다.
4. 내가 선택한 영화 또는 tv 의 디테일 정보를 모달로 띄운다.

그럼, 새로 만들거면 영화 따로 tv 따로만들어야하나?
??? : 당근ㅋ

// -Search.tsx

// 헤더에서 useForm 통해 보냈던 키워드(검색내용) 받아오기
const location = useLocation();
  const keyword = new URLSearchParams(location.search).get("keyword");

• 1차 관문. keyword 가 있을 때만 useQuery 안에 값이 담겨야하는데..? 라는 생각에 폭풍 검색 시작 😶‍🌫️
• 그 중 useQuery 의 enabled 옵션을 발견했다!
  • enabled 는 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.
  • 그래서 나는 keyword 가 존재할때만 실행되도록 하였다.

// -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 가 여러번 나고 있는게 거슬렸다.
  다른걸 검색 하지않아도 keyword 가 있다고 계속 fetch 됨..^^...
• 그래서, 키워드가 변경 될때만(다른걸 검색했을때) 다시 fetch 할 순 없나? 싶어 뒤적뒤적
• useEffect 로 가능했다!

  // keyword가 변경될 때만 movie_refetch()와 tv_refetch()가 실행될 수 있도록
  useEffect(() => {
    movie_refetch();
    tv_refetch();
  }, [keyword]);

• 검색결과도 훨 빨리나온다!

---

SearchMovie, SearchSeries 🔥

• 내 편협한 사고방식으로 내 발등을 찍었던 구간이다. 오래걸렸음.
• 우선 여기도 모달창을 띄워줄 것이므로 useNavigate(), useMatch() 는 이전과 동일하게 사용했다.

1) 내 거친 생각과 불안한 눈빛과 ..

• 내가 선택한 영화 또는 tv 의 아이디를 가져와야 모달창을 보여줄 수 있는데, fetch 후 나온 data.results 는 20개였다.
• .find() 를 사용하면 해결될 문제인데.. 나는 일치하는 값을 어떻게 찾지 하다가 results 의 index 에 접근해버림....
• 검색 후 나온 결과값의 results 의 index 값과 내가 선택한 영화의 index 값을 찾아야겠다는 어이없고 되지도 않는 로직을 짜기 시작..
• 될리가 있나 ㅋㅋ 하루 이상 날렸다.

2) 해결~

• 그러다가, 혼잣말로 ... "아 내가 선택한 영화의 id 를 어떻게 찾지?"

• ㅋㅋ이렇게 간단할 수가!!!!!!
• 그렇다 ㅜㅜ 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); }}

• 혼자 승리의 댄스를 만끽한 다음.. 다른 페이지에서했던 것처럼 비슷하게 로직 짰다.

---

완성!

• 검색 페이지의 모달창은 디테일 값만 받아오므로, 메인 페이지의 모달창과는 차이가있다.
  허나 검색되는 결과들이 모두 유명하진 않아 backdrop_path 가 없는 경우가 허다했다.
  poster_path 는 거의다 가지고 있길래 poster_path 를 강조하게 만들었다.

• 모달창

• 아래는, 이미지 정보를 전혀 가지고 있지 않는 경우가 간혹 있어서,
  둘다 없을 경우 내가 만든 대체이미지가 띄워지도록 설정해놔서 저렇게 뜨는거다 :) 하하

---

아래는 동영상