메모리 관리
메모리 누수, cleanup, useEffect cleanup, listeners, timers, 대용량 이미지 처리
1React Native 애플리케이션에서 memory leak이란 무엇인가요?
React Native 애플리케이션에서 memory leak이란 무엇인가요?
답변
memory leak은 메모리에 있는 객체가 애플리케이션에서 더 이상 사용되지 않지만 해당 객체에 대한 참조가 여전히 남아 있어 garbage collector가 메모리를 해제하지 못할 때 발생합니다. React Native에서는 정리되지 않은 subscription, unmount 이후에도 계속 동작하는 timer, 오래된 참조를 캡처한 closure에서 흔히 발생합니다. memory leak은 성능을 점진적으로 저하시키며 긴 세션 동안 크래시를 유발할 수 있습니다.
2메모리 관리에서 useEffect의 반환 함수(cleanup function)의 역할은 무엇인가요?
메모리 관리에서 useEffect의 반환 함수(cleanup function)의 역할은 무엇인가요?
답변
useEffect가 반환하는 cleanup function은 컴포넌트가 unmount되기 전이나 새로운 의존성으로 이펙트가 다시 실행되기 전에 실행됩니다. 주요 역할은 이펙트가 할당한 리소스를 정리하는 것입니다. subscription 취소, clearTimeout/clearInterval, event listener 제거, 진행 중인 요청 중단 등이 있습니다. 이 정리를 하지 않으면 이러한 리소스가 메모리에 계속 남아 unmount된 컴포넌트를 업데이트하려고 시도할 수 있습니다.
3useEffect의 cleanup function에서 clearTimeout과 clearInterval을 사용하는 것이 중요한 이유는 무엇인가요?
useEffect의 cleanup function에서 clearTimeout과 clearInterval을 사용하는 것이 중요한 이유는 무엇인가요?
답변
setTimeout과 setInterval로 생성된 timer는 컴포넌트가 unmount된 후에도 계속 실행됩니다. timer의 callback이 unmount된 컴포넌트의 state를 업데이트하려고 하면 'Can't perform a React state update on an unmounted component' 경고가 발생하며 memory leak이 됩니다. timer는 callback과 그 closure에 대한 참조를 유지하므로 garbage collector가 이러한 리소스를 해제하지 못합니다. cleanup에서 clearTimeout/clearInterval을 사용하면 이러한 timer를 올바르게 취소할 수 있습니다.
React Native에서 event listener를 사용할 때 memory leak을 어떻게 방지하나요?
React Native 컴포넌트에서 closure는 메모리 관리에 어떤 영향을 미치나요?
+17 면접 질문