마운트 시에 useEffect 실행 중단하기

React에서는 useEffect 훅이 데이터 가져오기, 이벤트 구독, DOM 조작과 같은 사이드 이펙트를 수행하는 데 자주 사용됩니다. 이 훅은 초기 마운트를 포함하여 모든 렌더마다 효과 함수를 실행할 수 있습니다. 그러나 특정 종속성이 변경될 때에만 효과를 실행하고 초기 마운트에는 실행하지 않기를 원하는 상황이 있을 수 있습니다. 이 블로그 포스트에서는 useEffect가 마운트 시에 실행되는 것을 방지하기 위한 다양한 접근 방법을 알아보겠습니다.

접근 방법 1: 마운트 플래그 사용

일반적인 접근 방법 중 하나는 컴포넌트가 마운트되었는지 여부를 결정하기 위해 마운트 플래그를 사용하는 것입니다. 이는 useRef 훅을 사용하여 구현할 수 있습니다. 다음은 예시입니다:

const useFetchNotOnMount = () => {
  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) {
      console.log('데이터 가져오는 중');
      dispatch(fetchData(filters));
    } else {
      isMounted.current = true;
    }
  }, [dispatch, filters]);
};

isMounted 플래그를 확인함으로써, 마운트 시에 효과를 건너뛰고 종속성이 변경될 때만 실행할 수 있습니다.

접근 방법 2: 초기 렌더 플래그 사용

다른 접근 방법은 첫 번째 렌더와 후속 렌더를 구분하기 위해 초기 렌더 플래그를 사용하는 것입니다. 다음은 예시입니다:

const useFetchNotOnMount = () => {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      console.log("데이터 가져오는 중");
      dispatch(fetchData(filters));
    }
  }, [dispatch, filters]);
};

isFirstRender 플래그를 확인함으로써, 초기 마운트 시에 효과를 건너뛰고 종속성이 변경될 때만 실행할 수 있습니다.

접근 방법 3: 커스텀 훅 사용

만약 마운트 시에 실행되지 않아야 하는 여러 개의 useEffect 훅이 있다면, 로직을 캡슐화하기 위해 커스텀 훅을 만들 수 있습니다. 다음은 예시입니다:

const useEffectAfterMount = (cb, dependencies) => {
  const mounted = useRef(true);

  useEffect(() => {
    if (!mounted.current) {
      return cb();
    }
    mounted.current = false;
  }, dependencies);
};

useEffectAfterMount(() => {
  console.log("데이터 가져오는 중");
  dispatch(fetchData(page, pageSize, search, sorts));
}, [page, pageSize, search, sorts]);

useEffectAfterMount 커스텀 훅을 사용하여, 효과가 종속성이 변경될 때만 실행되도록 하여 초기 마운트를 건너뛸 수 있습니다.

결론

이 블로그 포스트에서는 useEffect 훅이 마운트 시에 실행되는 것을 방지하는 다양한 접근 방법을 알아보았습니다. 마운트 플래그, 초기 렌더 플래그 또는 커스텀 훅 중 어떤 방법을 선택하든, 핵심은 필요한 경우에만 조건부로 효과를 실행하는 것입니다. 효과 실행 시점을 조정함으로써 성능을 최적화하고 불필요한 계산이나 API 호출을 피할 수 있습니다.

참고 자료 : 

reactjs