ErrorNote) Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

리액트 프로젝트 진행하다 비동기 작업을 처리하던 중 해당 오류가 발생했습니다.

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect
cleanup function.

경고 : 마운트 해제 된 구성 요소에서 반응 상태 업데이트를 수행 할 수 없습니다. 
이것은 작동하지 않지만 응용 프로그램의 메모리 누수를 나타냅니다. 수정하려면 useEffect 
정리 기능에서 모든 구독 및 비동기 작업을 취소하십시오.

주목해야 할 문장입니다. 마운트 해제 된 구성 요소에서 반응 상태 업데이트를 수행 할 수 없습니다. 즉, 제거된 컴포넌트에서는 상태 업데이트를 할 수 없다는 뜻입니다.

참고 블로그

위 블로그를 참조하여 해결 방법을 찾았습니다.

  useEffect(() => {
    axios.post("/api/like/get-like-state", variable).then((res) => {
      if (res.data.success && res.data.liked) {
        setLiked(res.data.liked);
      }
    });
  }, [variable]);

위 코드에서 오류가 발생했었습니다.

useEffect가 실행될 때마다 지역변수 mounted 값을 true로 설정하고 clean-up function에 의해 false로 수정합니다. 즉, 컴포넌트가 ummounted 되어 mounted 값이 false일 때는 상태 업데이트가 이루어지지 않습니다. (비동기 작업이 완료 되지 않았을 때). 반대로 mounted 값이 true(비동기 작업이 완료)일 때 상태 업데이트가 진행됩니다.

  useEffect(() => {
    let mounted = true;
    // 좋아요 상태 가져오기
    axios.post("/api/like/get-like-state", variable).then((res) => {
      if (res.data.success && res.data.liked && mounted) {
        setLiked(res.data.liked);
      }
    });

    // clean-up
    return () => (mounted = false);
  }, [variable]);

const Example = (props) => {
  const unmounted = useRef(false);
  useEffect(() => {
    return () => { unmounted.current = true }
  }, []);

  const setFilter = () => {
    // ...
    props.dispatch(fetchCourses()).then(() => {
      if (!unmounted.current) {
        setLoading(false);
      }
    })
  }

  // ...
  return (
    <ReactTable onFetchData={setFilter} /* other props omitted */ />
  );
}

https://stackoverflow.com/questions/58038008/how-to-stop-memory-leak-in-useeffect-hook-react