[React] useEffect와 클린업 함수

useEffect

useEffect는 React의 Hook 중 하나로, 컴포넌트가 렌더링된 후에 어떤 코드를 실행할지 정의할 수 있다. 이 Hook은 부수 효과(side effects)를 수행하기 위해 사용된다. 예를 들어, 데이터를 가져오거나 DOM을 직접 조작하는 작업이 이에 해당한다.

클린업(Cleanup)이란?

useEffect에서 반환하는 함수를 클린업 함수라고 한다. 이 함수는 컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전에 호출된다. 클린업 함수는 주로 리소스를 해제하거나, 이벤트 리스너를 제거하는 등의 작업에 사용된다.

예시

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // 컴포넌트가 마운트되거나 업데이트될 때 실행되는 코드
    const timerID = setInterval(() => {
      console.log('This will run every second');
    }, 1000);

    // 클린업 함수
    return () => {
      clearInterval(timerID);
      console.log('Cleanup: Timer cleared');
    };
  }, []); // 빈 의존성 배열을 전달하여 마운트와 언마운트 시에만 실행되게 한다.

  return <div>Check the console.</div>;
}

• setInterval은 타이머를 설정하고, 이 타이머는 컴포넌트가 언마운트되지 않는 한 계속 실행된다.
• 클린업 함수에서 clearInterval을 호출하여 타이머를 해제한다. 이렇게 해서 메모리 누수를 방지한다.

잠재적 제한 사항이나 엣지 케이스

• 의존성 배열이 빈 배열([])이므로, useEffect와 클린업 함수는 컴포넌트가 마운트되거나 언마운트될 때만 실행된다. 의존성 배열에 변수를 추가하면, 해당 변수가 변경될 때마다 useEffect와 클린업 함수가 실행된다.
• 클린업 함수는 비동기 작업에서 주의해야 할 필요가 있다. 컴포넌트가 언마운트된 후에 비동기 작업이 완료되면, 예상치 못한 문제가 발생할 수 있다. 이러한 경우에는 클린업 함수에서 비동기 작업을 취소하는 로직을 추가해야 한다.

클린업 함수를 쓰지 않으면 발생하는 문제

clearInterval를 클린업 함수에서 실행하지 않으면, 컴포넌트가 언마운트된 후에도 setInterval에 의해 설정된 타이머가 계속 실행될 것이다. 이로 인해 다음과 같은 문제가 발생할 수 있다:

메모리 누수

타이머가 계속 실행되면서 메모리를 점유하게 되고, 이는 메모리 누수로 이어질 수 있다. 이러한 메모리 누수는 애플리케이션의 성능을 저하시킬 수 있다.

예상치 못한 동작

컴포넌트가 언마운트된 후에도 타이머에 의한 작업이 계속 실행되면, 그 작업이 다른 부분에 영향을 미칠 가능성이 있다. 예를 들어, 타이머가 어떤 전역 상태를 변경한다면, 그 상태 변경은 언마운트된 컴포넌트와 관련이 없는 다른 컴포넌트에도 영향을 미칠 수 있다.

에러 발생

타이머 함수 내에서 언마운트된 컴포넌트의 상태를 변경하려고 하면, React는 "Can't perform a React state update on an unmounted component"와 같은 경고를 출력할 것이다. 이는 좋지 않은 패턴이며, 버그를 유발할 수 있다.

결론

따라서 clearInterval 같은 클린업 작업을 적절히 수행하지 않으면, 위와 같은 문제가 발생할 가능성이 높다.