Fix a missing dependency warning

해당 경고 이미지는 위키피디아 api를 이용한 검색 기능을 구현하는 과정에서 발견했다.

검색을 해보니 useEffect내에 사용하고 있는 state를 배열안에 추가시켜 달라는 의미라고 한다.

 

1. 첫번째 시도

  const [term, setTerm] = useState('programming');
  const [results, setResults] = useState([]);

  useEffect(() => {
    const search = async () => {
      const { data } = await axios.get('https://en.wikipedia.org/w/api.php', {
        params: {
          action: 'query',
          list: 'search',
          origin: '*',
          format: 'json',
          srsearch: term,
        },
      });

      setResults(data.query.search);
    };

    if (term && !results.length) {
      search();
    } else {
      const timeoutId = setTimeout(() => {
        if (term) {
          search();
        }
      }, 1000);

      return () => {
        clearTimeout(timeoutId);
      };
    }
  }, [term, results.length]);

경고문에서 언급해준대로 results.length를 useEffect 내에서 사용하고 있는 state 배열에 넣었다.

결과는 해당 경고문이 사라졌지만,

개발자 도구 -> Network에서 위키피디아 api를 2번 fetching하는 문제를 확인했다.

최초 렌더링 될 때, useEffect 내에서 새로운 참조 값을 받기 때문에 불필요한 실행이 된 것으로 이해했다.

 

2. 두번째 시도

  const [term, setTerm] = useState('programming');
  const [debouncedTerm, setDebouncedTerm] = useState(term);
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedTerm(term);
    }, 1000);

    return () => {
      clearTimeout(timerId);
    }
  }, [term]);

  useEffect(() => {
    const search = async () => {
      const {data} = await axios.get('https://en.wikipedia.org/w/api.php', {
        params: {
          action: 'query',
          list: 'search',
          origin: '*',
          format: 'json',
          srsearch: debouncedTerm,
        },
      });
      setResults(data.query.search);
    };
    search();
  }, [debouncedTerm]);

 

• 일정 시간내에 검색된 검색어 파악하는 useEffect
• 해당 검색어를 위키피디아 api로 fetching하는 useEffect

해당 과정을 두개의 useEffect로 나눠서 불필요한 실행을 막는 것을 확인했다.

초기 검색어인 'programming'을 또 다시 조회하면 개발자 도구 -> Network에서 이전에 실행된 내용만 있지 또 실행되지는 않는 것을 확인했다.

 

참고!
Debounce와 Throttle 차이점은?
Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술
Throttle은 이벤트를 일정한 주기마다 발생하도록 하는 기술