시작
React로 웹 사이트를 만들다 보면 간혹 볼 수 있는 오류입니다.
오늘은 Can't perform a react state update on an unmounted component 에 대해 알아보면서 해결법을 알아보는 시간을 가지도록 하겠습니다.
에러 !!
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.이유?
이 현상을 이해하려면 기본으로 비동기에 관한 지식이 있어야 한다.
해당 오류는 ComponentA 를 랜더링하고 있던 도중 비동기로 state의 값이 바뀌면서 ComponentA 랜더링을 취소하고 ComponentB 로 랜더링을 바꿨다. 그러면서 ComponentA 에 관련된 코드들이 컴포넌트가 사라진 후에 업데이트 할 수 없기 때문에 내는 오류이다.
해결방법
찾아본 결과 아래와 같은 해결방법이 있었다.
1) 가장 간단한 해결방법으로는 A컴포넌트를 사라지게하고 B컴포넌트를 랜더링하는 것이다.
2) 다음 방법으로는 콘솔창에서 알려준 방법으로 useEffect 의 cleanup function 을 이용하는 것이다.
개발보다 회사 매출에 영향력을 주는 개발자