React(리액트) clean-up 함수란? (메모리 누수 경고 해결 방법)

가끔 개발을 진행하며 데브툴에 뜨는 에러를 보다보면 clean-up이라는 경고가 표기된다. 다행스럽게도 '경고'이기 때문에 기능에는 문제가 없으나 잡고가는게 당연히 좋을 것이다. 하여 clean-up이 무엇을 뜻하는 에러인지 정리해보고자한다. 

 

✔️ Clean-up 경고 문구

---

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.

 

✔️ Clean-up 경고 문구가 발생하는 상황

---

상단과 같은 경고 문구가 발생하는 이유는 url 이동 등으로 인해 페이지가 새로 그려질 때, 새로 그려진 페이지에서 이전의 useEffect 훅의 로직이 실행되었기 때문이다.

예를 들어 A라는 페이지에서 a라는 로직을 작성하였다. 이후, b로직이 있는 B 페이지로 이동을 했을 때 우리는 b가 실행되길 원하지만 실제로는 a과 b가 함께 실행되는 경우이다.

또 다른 예도 있다. C 페이지에서 데이터를 fetch하여 c라는 변수의 상태를 업데이트 해주는 로직이 있다고 가정해보자. C 페이지에서 데이터를 받아오는 와중에 완료되기 이전에 D 페이지로 이동을 하였다. 이후, 데이터 fetch가 완료되어 c 변수의 상태를 업데이트 해주려고 하는데, 이미 D페이지와 관련된 컴포넌트들이 로드되었을 때의 경우에도 발생한다.

 

✔️ 현상 해결하기

---

상단과 같은 문제를 해결하기 위해서는 clean-up 함수를 실행해주면 된다. 언제 실행시켜주면 좋을까? 페이지를 옮겨다닐 때, 문제가 발생하니 아마 페이지를 떠날 때 clean-up을 시켜주는게 가장 좋을 것이다.

이를 멋있는 말로 컴포넌트의 마운트가 해제되는 때 실행한다라고 정리할 수 있을 것이다. (만약 마운트 해제되는 때에 대하여 헷갈리는 사람이 있다면 react의 라이프사이클에 대해서 조금 더 공부할 것을 추천한다.)

 

✔️ Clean-up 함수 사용 예시

---

참고로 Clean-up 함수라는 것은 사실 따로 지명된건 아니고, 목적이 명확하게 드러나도록 칭했을 뿐이라고 한다. 

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

더불어 Clean-up이 필요하지 않은 경우에는 굳이 처리해 주지 않아도 무방하다.

 

✔️ 참고사항

---

리액트 버전 18부터는 해당 경고가 사라졌다. 이는 메모리 사용성을 향상하여 패치하였기 때문이다.

Improved memory usage: React now cleans up more internal fields on unmount, making the impact from unfixed memory leaks that may exist in your application code less severe.

https://github.com/facebook/react/pull/24195

Add React 18 changelog by gaearon · Pull Request #24195 · facebook/react