React 컴포넌트에서 이전 props 값 추적하기

문제 상황

실시간 데이터를 받아 렌더링하는 대시보드 컴포넌트에서 값의 변화량을 표시해야 했다. 이전 값과 현재 값을 비교해 증가/감소 여부를 판단하는 로직이 필요했다.

클래스 컴포넌트였다면 componentDidUpdate에서 prevProps를 받아 처리했겠지만, Hooks로 전환한 후라 다른 방법이 필요했다.

해결 방법

useRef로 이전 값을 저장하고 useEffect로 업데이트하는 커스텀 훅을 만들었다.

function usePrevious(value) {
  const ref = useRef();
  
  useEffect(() => {
    ref.current = value;
  }, [value]);
  
  return ref.current;
}

사용 예시는 다음과 같다.

function MetricCard({ value }) {
  const prevValue = usePrevious(value);
  const isIncreased = prevValue !== undefined && value > prevValue;
  
  return (
    <div>
      <span>{value}</span>
      {isIncreased && <span className="trend-up">↑</span>}
    </div>
  );
}

동작 원리

useEffect는 렌더링 이후에 실행되므로, 현재 렌더링에서는 이전 값을 반환하고 effect가 실행되면서 다음 렌더링을 위해 값을 업데이트한다.

초기 렌더링에서는 ref.current가 undefined이므로 조건문으로 처리했다.

마무리

Hooks 초기에는 클래스 컴포넌트의 lifecycle 메서드를 직접 대응시키려 했는데, 이제는 Hooks의 패러다임에 맞춰 생각하게 됐다. useRef와 useEffect의 실행 타이밍을 이해하면 이런 패턴들이 자연스럽게 나온다.