React - 5. Cleanup Function

What

useEffect 의 콜백 함수에서 side effect를 만들면 뒷정리가 필요한 경우가 종종 있었는데,
이럴 때 우리는 콜백 함수를 이용해 리턴 값으로 그 뒷정리를 하는 함수를 리턴할 수 있었다.

여기서 뒷정리를 위해 return한 함수를 우리는 Cleanup Function이라고 한다.

예로, 이미지 미리보기를 구현하려고 한다면, Object URL을 만들어서 브라우저의 메모리를 할당(createObjectURL) 해야한다. 그 후엔 정리 함수를 통해 이때 할당한 메모리를 다시 해제(revokeObjectURL)해줘야 하는 것이다.

Why

쉽게 말해, callback 한번에 Cleanup Function도 한번. 이렇게 생각하면 편하다.

정확히는,
1. callback 함수가 호출 되기 전에 실행되거나/
2. 컴포넌트가 화면에서 사라질 때 그 직전에/
정리 함수가 실행된다.

즉, 정리 함수가 실행되기 직전에 실행된 callback의 side effect를 정리하기 위해 실행되는 것이다.

그 예시는 다음과 같다: