(useEffect)Warning: Can't perform a React state update on an unmounted component.

😲 시작하기에 앞서

리액트 라우터를 활용하여 프로젝트를 만들던중 라우터 이동간에
다음과 같은 에러가 발생하였다.

Error

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.

번역 :

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

이런 빨간색상의 에러를 볼때마다 화가 솟구쳤지만 에러를 고칠때마다 느낀것은 친절하게 설명이 나올때가 있고 그 힌트를 통해 보다 쉽게 수정을 할 수 있다.
(구글링을 하였다..!)

Error main point

언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없으며.
해당 작업은 수행되지 않지만 메모리 누수가 발생된다.
cleanup 함수를 이용해라.

solution

useEffect의 cleanup 함수를 만든다.