[React] useEffect 의 정리함수는 언제 사용하면 좋을까?

김현수·2024년 3월 31일

React

목록 보기

27/31

🖋️ useEffect 의 정리함수는 언제 사용?

'useEffect'에서 정리 기능을 사용하는 것이 항상 필요한 것은 아니지만 특정 시나리오에서는 원치 않는 동작을 방지하고 애플리케이션 성능을 최적화하는 것이 중요

WHEN ?

이벤트 리스너 추가 및 제거
- DOM 요소(특히 window 또는 document와 같은 전역 개체)에 이벤트 리스너를 추가할 때마다 메모리 누수 및 의도하지 않은 동작을 방지하기 위해 구성요소가 마운트 해제되거나 효과가 다시 실행되기 전에 해당 리스너를 제거하는 것이 중요
- window, document, 상위 요소의 Dom 에 이벤트 설정할 때

useEffect(() => {
  const handleResize = () => {
    console.log('Window resized');
  };

  window.addEventListener('resize', handleResize);
  
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

외부 데이터 소스 구독
- 구성 요소가 WebSocket 연결이나 데이터 가져오기 라이브러리와 같은 외부 데이터 소스를 구독하는 경우 정리 기능에서 구독을 취소하여 마운트 해제된 구성 요소에 대한 업데이트를 방지

useEffect(() => {
  const subscription = dataSource.subscribe();
  
  return () => {
    subscription.unsubscribe();
  };
}, []);

Timer 및 Interval
- 구성 요소 내에서 타이머 또는 간격을 설정할 때 정리 기능에서 이를 지워 구성 요소가 마운트 해제된 후 또는 효과가 다시 실행되기 전에 타이머가 계속 실행되는 것을 중지

useEffect(() => {
  const timerId = setTimeout(() => {
    console.log('This runs after 1 second');
  }, 1000);
  
  return () => {
    clearTimeout(timerId);
  };
}, []);

API 요청 취소
- 효과가 취소할 수 있는 API 요청을 시작하는 경우(예: Axios의 취소 토큰 사용) 마운트 해제된 구성 요소에 상태가 설정되지 않도록 정리 기능에서 진행 중인 요청을 모두 취소

useEffect(() => {
  const source = axios.CancelToken.source();
  
  axios.get(url, { cancelToken: source.token })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
      } else {
        // handle error
      }
    });

  return () => {
    source.cancel('Operation canceled by the user.');
  };
}, [url]); // Assuming 'url' is a dependency