React clearInterval()

1. cleanup 함수란?

useEffect에서 반환된 함수는 클린업 함수로, 다음과 같은 상황에서 호출된다.

1. 컴포넌트가 언마운트 될 때

• 컴포넌트가 DOM에서 제거되기 전에 정리 작업이 필요하다
• 예: 타이머, 이벤트 리스너, 네트워크 요청 취소 등

2. useEffect 가 재실행되기 직전

• 의존성 배열 값이 변경될 때, 새 작업을 실행하기 전에 기존 작업을 정리한다.

예제 코드

  useEffect(() => {
    console.log(step, 'setup 함수 호출');
    const timer = setInterval(() => {
      console.log(step, new Date());
    }, 1000);
    return () => {
      console.log(step, 'cleanup 함수 호출');
      clearInterval(timer);
    };
  }, [step]);

 

위 코드는 이제 step이 변경될 때마다 useEffect가 실행이 된다. 

• 현재 실행 중인 타이머 정리(클린 업 함수 호출), 기존의 setInterval 이 계속 실행되어 있을수도 있으므로, clearInterval로 이전 타이머를 제거한다.
• 새로운 setInterval 설정, 변경된 step 값과 함께 새 타이머를 설정한다.

클린업 함수의 역할

• 컴포넌트가 재렌더링되기 전에 기존의 타이머를 정리한다.
• step 값이 변경될 때마다 새로운 타이머가 생성되므로, 중복 타이머 실행을 방지하기 위해 기존 타이머를 제거한다.

의존성 배열 [step]

• step 값이 변경될 때마다 이 useEffect가 재실행된다.
• step이 의존성 배열에 포함되어 있으므로, step 값이 바뀔 때마다 새 타이머가 설정되고 기존 타이머는 정리된다.

예제 코드

 useEffect(() => {
    console.log('setup 함수 호출');
    const timer = setInterval(() => {
      console.log(new Date());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

 

작동 방식

• useEffect는 처음 한 번만 실행되고, 의존성 배열이 빈 상태([])이므로, 컴포넌트가 마운트될 때만 setup이 호출된다.
• 타이머(setInterval)가 설정되어 1초마다 new Date()를 출력한다.
• 컴포넌트가 언마운트될 때만 클린업 함수가 호출된다.

클린업 함수의 역할

• 컴포넌트가 언마운트될 때 타이머를 정리한다.
• 타이머가 계속 실행되면 메모리 누수 또는 불필요한 작업이 발생할 수 있으므로, 이를 방지하기 위해 clearInterval을 호출한다.

의존성 배열

• 의존성 배열이 빈 상태이므로, useEffect는 마운트될 때 딱 한번 실행되고, 언마운트될 때 클린업 함수가 호출된다.
• 타이머는 한 번만 설정되며, 컴포넌트가 사라질 때 제거된다.

즉, 클린업 함수는 불필요한 자원 낭비나 중복 작업을 방지하기 위한 핵심적인 함수이다.

첫 번째는 step 값에 따라 타이머를 재설정해야 하는 경우에 적합하며, 두 번째 코드는 단순히 컴포넌트 생명주기와 연관된 작업에 적합하다.