[React] useEffect 첫 렌더링 시 함수 실행 막기

useEffect는 첫 렌더링 시에 실행되고, 배열 안에 state가 변화할 때마다 실행된다. 첫 렌더링 시에 실행되지 않고, 배열 안에 state가 변화할 때만 로직을 실행하고 싶어서 방법을 찾아 보았다.

stackoverflow에서 찾은 해답으로, useRef 함수를 활용한 custom hook을 만들어서 사용했다.

useDidMountEffect.js

import { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
  const didMount = useRef(false);

  useEffect(() => {
    if (didMount.current) func();
    else didMount.current = true;
  }, deps);
};

export default useDidMountEffect;

코드 적용

import useDidMountEffect from '../../../hooks/useDidMountEffect';

useDidMountEffect(() => {
  // do something
}, [state]);

참조
https://stackoverflow.com/questions/53253940/make-react-useeffect-hook-not-run-on-initial-render/63776262#63776262
https://www.daleseo.com/react-hooks-use-ref/