[React] useEffect 클린업(Clean Up) 함수로 메모리 누수 방지

시작하며...

memo, useMemo, useCallback 사용해서 렌더링 최초화 하기!!

지난 게시물을 보면 이미지가 계속 렌더링 되어 깜박거리는 현상을 useMemo 를 사용하여 해결하였다.

 

그러나 이미지 미리보기 URL 을 만들기 위해 사용했던 URL.createObjectURL() 의 MDN 문서를 보니 더 이상 사용하지 않을 땐  URL.revokeObjectURL() 를 사용해서 하나씩 해제해줘야 한다고 적혀있는 것을 발견했다.

 

mdn 문서

 

그래서 리액트 Side Effect 의 Clean Up 함수를 사용해서 객체 URL 을 해제해줘야 한다!!

 

사이드 이펙트 Side Effect 란?

그럼 일단 side effect 란 무엇일까?

네이버 영어사전에 따르면 side effect 는 사전적인 의미로 "부작용" 이라고 한다.

 

부작용

그래서 프로그래밍 관점에서 side effect 는 부작용으로 "외부에 부수적인 작용을 하는 것" 이라고 한다.

 

사이드 이펙트란?
함수 안에서 함수 바깥에 있는 값이나 상태를 변경하는 것

 

React 의 사이드 이펙트 side effect

리액트에서 side effect 는 외부에서 데이터나 상태를 변경하는 것인데, 이를 수행하는 것이 바로 useEffect 훅 이다.

즉, 리액트에서 useEffect 는 side effect 를 실행하고 싶을 때 사용하는 함수라고 할 수 있다.

 

useEffect 에 대한 자세한 내용은 공식문서에서 확인할 수 있다.

useEffect – React

 

클린업 함수 Clean up

useEffect 를 사용해서 side effect 를 만들게 되면 정리가 필요한 상황이 오게 되는데

이때 useEffect 콜백함수 안에서 정리 함수를 리턴하면 된다. 즉 side effect 를 정리하는 Clean up 함수가 필요하게 된다.

 

클린업 Clean up 장점

• 메모리 누수 방지
• 성능 향상
• 안정성 향상
• 유지보수성 향상

사용하는 방법은 아래 코드와 같이 useEffect 안에 return 으로 클린업 함수를 정의하고 그 안에 코드를 작성하면 된다.

useEffect(() => {
    // 생략   
    return () => {
    	// 클린업 함수
    };
  }
}, []);

 

클린업 함수 적용하기

기존 코드는 imageUrl 에 useMemo 를 감쌌고, 의존성 배열을 image 로 하여 image 가 변경될 때마다 해당 image 를 URL 로 만들어주는 객체를 계속 생성하게 된다. 즉 다른 이미지로 바뀌었는데도 그전에 만든 객체는 남아있게 된다는 의미이다.

변경 전

 

그래서 imageUrl 을 useEffect 를 사용하고, 컴포넌트가 렌더링되거나 image 가 변경될 때마다 실행되며 image 가 있으면 URL 을 만들고, clean up 함수를 통해 생성된 URL을 해제함으로써 메모리 누수를 방지하게 된다.

변경 후

 

다른 예시

그 밖에도 resize 이벤트 리스너를 추가하고, 언마운트 될 때 제거하여 메모리 누수를 방지할 수 있다.

다른 예시

 

• 이벤트 리스너 제거
• 타이머 및 인터벌 정리
• 비동기 작업 정리