리액트 컴포넌트 내부에서 Async 요청을 보낸 뒤에, 응답을 받기 전에 해당 컴포넌트가 unmount 되면, then 내부 코드가 실행이 될때, 애매한 상황이 연출된다. 이미 컴포넌트는 unmount 되었는데, 컴포넌트에 접근해야 한다니...
그럴경우에 위 이미지와 같은 에러가 뜨게된다.
이런 문제를 막기 위해서 사용할 수 있는 몇가지 방법이 있는데 그 중 내가 사용한건 useMountState 훅스를 만드는 것이다.
export function useMountState() {
const mountRef = useRef(false);
const isMounted = useCallback(() => mountRef.current, []);
useEffect(() => {
mountRef.current = true;
return () => {
mountRef.current = false;
}
, []}
}
이 훅스를 사용하면, 만약 컴포넌트가 unmount 되었을 경우 isMounted() 의 결과는 false 가 나와서, then 다음 코드를 실행할지 말지 결정할 수 있다.
https://www.benmvp.com/blog/handling-async-react-component-effects-after-unmount/