usecallback

useCallback

내가 이해한 useCallback은

const getNews = useCallback(async () => {
    if (keyword.trim()) {
      try {
        const response = await axios.get(
          `https://api.nytimes.com/svc/search/v2/
          articlesearch.json?q=${keyword}&api-key=${key}&sort=newest`,
        );
        const { docs: newsList } = response.data.response;

        dispatch(searchNews({ nextPage: 2, newsList }));
        dispatch(addKeyword(keyword));
        setKeyword('');
      } catch (e) {
        console.error(e);
      }
    }
  }, [dispatch, keyword]);

  useEffect(() => {
    const timer = setTimeout(() => {
      getNews();
    }, 500);
    return () => {
      clearTimeout(timer);
    };
  }, [getNews]);

위의 코드를 보면 useCallback으로 감싸져 있는 getNews를 keyword와 dispatch가 바뀔 경우
재정의을 한다고 생각한다.

그럼 getNews는 안에 있는 코드를 실행하며 재정의가 되고 아래의 useEffect의 디펜더시어레이가
getNews이기 때문에 getNews가 재선언된다.

여기서 useCallback을 사용하는 이유는 useCallback을 사용하지 않을경우 계속 getNew가 선언 될때 마다 메모리의 부담을 주기 때문에 같은 메모리를 사용하여 부담을 주지 않게 할 수 있는 useCallback을 사용하는 것이다.