useEffect의 dependancy array 경고를 지우는 법

useEffect() 함수의 dependancy array (의존성 배열)에 값을 주입하면, 해당 배열 중의 값이 하나라도 변경되었다면 useEffect() 내의 콜백 함수를 실행한다. eslint를 설정하면 useEffect() 의 콜백함수에서 사용된 값을 dependancy array에 주입하지 않으면 경고를 일으킨다.

유용하지만, 때로는 useEffect()에 값을 주입하지 않아도 되거나, 주입하면 안되는 상황도 있다. 이러할 때
경고문을 없애주는 주석문구가 있다.

useEffect(() => {
		
  // 아래는 예시 함수
    const controller = new AbortController();

    const fetchData = async () => {
      try {
        const res = await axiosInstance[method.toLowerCase()](url, {
          ...requestConfig,
          signal: controller.signal,
        });

        console.log(res);
        setResponse(res.data);
      } catch (error) {
        console.log(error);
        error instanceof Error && setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => controller.abort();
        
        // eslint-disable-next-line		<-- 이 문구를 추가해주면 경고문이 사라진다.
    }, [reload]);

참고로 해당 주석문은, useEffect() 경고 뿐만 아니라 그 어떤 경고문에도 적용이 가능하므로 유용한 기능이다.