프로젝트 내내 간헐적으로 등장하며 나를 당황하게 했던 경고문이다.
나중에 해결해야지 미루고 미뤄오다가
오늘 위 경고문과 관련해 도움이 되는 글을 읽고 해결했던 방법을 기록으로 남긴다.
메모리 누수가 발생하는 이유
fetch 등 비동기를 실행하는 실행 컨텍스트가 완료 되기 전에 컴포넌트가 unmount가 된 후, setState가 실행이 될 때 발생하게 된다.
다시 말해 서버에서 응답이 오는 시간이 길어지고 있는데, 그 사이에 컴포넌트가 unmount 된 경우이다. 컴포넌트는 사라졌지만, 여전히 요청은 대기 중이다. 그리고 요청이 온다면, setState에 값을 넣을 것이며, 리액트는 이제 위와 같은 경고문을 내뱉을 것이다.
특정 조건에서만 setState 함수를 실행하도록 설정해주자.
해결방법
경고문에서 안내하는 것처럼 useEffect의 cleanup function을 활용한다.
api 요청 후 setState를 실행할지 여부를 판단하는 isComponentMounted 변수를 useState로 선언한다. 초기 값은 true로 설정하고, 오직 isComponentMounted가 true일 때만 setState 함수를 실행하도록 한다. (useEffect cleanup function에서 isComponentMounte를 false로 만들어준다. 이때 dependency array가 빈 배열인 useEffect함수에 클린업 함수를 설정해주어야한다.. )
컴포넌트가 unmount된 경우에는 서버로부터 요청이 오더라도 isComponentMounted이 false 상태이기 때문에 setState를 실행하지 않게 된다.
const [isComponentMounted, setIsComponentMounted] = useState(true);
useEffect(()=>{
(async() => {
const res = await axios.get(`~~`)
if(isComponentMounted){
setDataList([...res.dataList])
}
})()
return () => setIsComponentMounted(false);
},[])
