React Hooks에서 componentDidUpdate 처럼 사용하기

예전에 React로 만들었던 토이프로젝트를 이번에 Hooks 스타일로 변경하는 작업을 시작했다.

순조롭게 변경 중이었는데 문제점이 생겼다.

Class형에서 사용하던 componentDidUpdate를 Hooks에서는 useEffect를 사용한다고 공식문서에 나와있어서 진행을 하였는데 내가 예상했던 것과는 useEffect가 호출되는 부분이 달랐다.

componentDidUpdate - Mount될 때에는 호출되지 않고 props나 state가 변경되어 컴포넌트가 업데이트 될 때에 호출됨.

useEffect에서

useEffect(() => {
    // 작업
}, [value]);

이렇게 사용하면 Mount될 때에도 호출, 컴포넌트 업데이트될 때에도 호출됨.

내가 원하는 방식은 말 그대로 컴포넌트가 업데이트 되었을 때만(ex. props 변경) 호출되기를 바랬다.

이리저리 검색해보고 궁리해본 끝에 2가지 방법을 알아내었다.

첫번째 방법은 useEffect에서 componentWillUpdate처럼 동작하는 리턴함수를 이용하는 방법이다.

useEffect(() => {
    return () => {
      // willUpdate
      // 작업
    }
  }, [value]);

이런 방식으로 작성해주면 willUpdate긴 하지만 내가 원하는 동작을 할 수 있다.

두번째 방법은 Custom Hook을 이용해 prev값을 따로 저장하는 것이다.

function usePrevious(value) {
    const ref = useRef();
    console.log(ref)
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  }

위 같은 Custom Hook을 작성해놓고

const prevValue = usePrevious(value);
 useEffect(() => {
  if (prevValue !== undefined && prevValue !== value) {
      // 작업
  }
}, [value]);

주의해야 할 점은 처음에 prevValue 값이 undefined가 될 수 있기 때문에 조건문에서 처리를 해줘야한다.