Development/React.js

[React] router 이동시, 에러

moretz0921 2022. 2. 4. 15:42

 

프로젝트로 공부중 위와 같은 에러가 발생했다.

간단한 오류지만 컴포넌트 상태 값을 처리하는 과정에서 누구든지 발생할 수 있는 에러라고 한다!! 

 

정리 

1. 리엑트로 router를 이동 시, 위와 같은 에러가 나올 수 있다.

2. 언마운트된 컴포넌트에서는 상태를 추적할 수 없고, 상태를 추적하지 않기에 작업이 수행되지는 않지만 메모리 누수가 발생할 수 있으니 useEffect의 cleanup 함수를 이용하라!!! 

 

 

발생 이유

1. router 이동 후, 이동 전 컴포넌트에서 state를 바꾸려는 시도가 있을 때

2. 비동기 처리 과정 

 

 

해결

1. 라우터를 이동 전에 해당 컴포넌트에서 state 변경 작업을 모두 완료 후, 라우터 이동을 시킨다. 

2. 리엑트 조언대로 useEffect의 cleanup 함수를 이용한다. 

 

 

 

 

출처

 

https://kyounghwan01.github.io/blog/React/cant-perform-a-React-state-update-on-an-unmounted-component/

 

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your applicatio

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.

kyounghwan01.github.io

 

https://velog.io/@ohgoodkim/-%EC%97%90%EB%9F%AC%EB%85%B8%ED%8A%B8-Cant-perform-a-React-state-update-on-an-unmounted-component

 

❗️📚 에러노트 - Can't perform a React state update on an unmounted component

에러발생 리액트를 이용하여 모달 컴포넌트를 개발 하던중 다음과 같은 에러가 발생하였다. 경고! 언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지

velog.io