[React] ComponentDidUpdate 만들기

componentDidUpdate를 커스텀 훅으로 구현하기

: 개발을 하다보면 초기 렌더링 시기에는 useEffect 내의 로직을 쓰고 싶지 않지만, 초기 렌더링 이후에는 쓰고 싶을 때가 있다. 이 때마다 컴포넌트 외부에 변수를 선언해놓고 componentDidMount 시점에 변수에 false/true 등의 값을 줘서 개발하는 방식으로 했었는데 그것보다는 실제로 componentDidUpdate 커스텀 훅을 만들어서 사용하는 것이 낫다는 판단하에 만들어본다.

: 이 때, 렌더링과 관계가 없으면서도 리렌더링 시에 값을 잃어버리지 않도록 'useRef'를 써준다는 점 외에 특별한 부분은 없다.

type stateType = any;

const useComponentDidUpdate = (logic: () => void, dependencies: stateType[]) => {
  const isCompoentDidMounted = useRef<boolean>(true);
  
  useEffect(() => {
    if (!isCompoentDidMounted.current) logic();
    else isCompoentDidMounted.current = false;
  }, dependencies);
};

위와 같이 만들고 커스텀 훅을 import 하여 logic 에는 useEffect 내에서 실행할 로직을 넣어주고(함수 형태로), dependencies에는 useEffect와 연계된 state 들을 넣어주면 된다.