Search

https://feelvieact.netlify.app/search

---

케이스별 화면

1. 입력전

2. 입력중

3. 결과없음

4.리스트

---

0.5초 동안 추가 입력이 없을때에 Api 요청

useEffect(() => {
  let delayTimer;
  const searchFetch = async () => {
    try {
      setLoading(true);
      setIntro(false);
      setSearchNone(false);

      const searchValue = await movieApi.search(searchWord);
      setSearchList(searchValue.data.results);
      setLoading(false);
      setSearchNone(searchValue.data.results.length === 0);
    } catch (error) {
      console.error(error);
    }
  };
  if (searchWord) {
    delayTimer = setTimeout(searchFetch, 500);
  }
  return () => clearTimeout(delayTimer);
}, [searchWord]);


// 검색 인풋 값 변경
const searchChange = (event) => {
  setSearchWord(event.target.value);
  // 백스페이스 키를 눌러서 입력값을 지운 경우
  if (event.target.value === '') {
    setSearchNone(false);
    // 기존에 들어있던 값 초기화
    setSearchList([]);
    // 로딩 없애고 인트로 다시 등장
    setLoading(false);
    setIntro(true);
  } else {
    setSearchNone(false);
    setLoading(true);
    setIntro(false);
  }
};

---

뱃지로 타입 구분