컴포넌트가 업데이트 될 때만(!) useEffect 하기

useEffect는 컴포넌트가 붙었을 때도(componentDidMount) 실행이 된다. 컴포넌트가 업데이트 될 때만, 즉 componentDidUpdate의 경우에만 처리하고 싶은게 있는데 useEffect는 기본적으로 항상 componentDidMount 역할을 하고, 거기에 dependency에 변경 사항이 생기면 componentDidUpdate의 역할도 한다.

useEffect의 이런 성질을 고려했을 때, useEffect를 쓰면서도 componentDidUpdate 역할만 하도록 할 수 있을까?

const mounted = useRef(false);

useEffect(() => {
  if(!mounted.current) {
    mounted.current = true;
  } else {
  	//바뀌는 값에 따라 실행할 코드
  }
}, [바뀌는값])

이렇게 하면 useEffect의 특성상 어쩔 수 없이 componentDidMount 역할을 하지만 if 부분 때문에 아무 것도 하지 않는다. 그래서 바뀌는 값에 따라 else 부분이 실행될 것이기 때문에 componentDidUpdate 역할만 하는 것처럼 할 수 있다.