React 컴포넌트에서 이전 props 값 참조하기

문제 상황

대시보드 컴포넌트에서 특정 props가 변경될 때만 API를 호출해야 했다. 하지만 useEffect 내부에서는 현재 값만 접근 가능해서 이전 값과 비교할 방법이 필요했다.

useEffect(() => {
  // userId가 실제로 변경되었을 때만 호출하고 싶음
  // 하지만 이전 값을 알 수 없음
  fetchUserData(userId);
}, [userId]);

해결 방법

useRef를 활용해 이전 값을 저장하는 커스텀 훅을 작성했다.

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

렌더링 순서상 useEffect는 렌더링 완료 후 실행되므로, 훅 호출 시점에는 이전 값을 반환하고 이펙트에서 현재 값으로 업데이트된다.

활용

function Dashboard({ userId, filters }) {
  const prevUserId = usePrevious(userId);
  
  useEffect(() => {
    if (prevUserId !== undefined && prevUserId !== userId) {
      // userId가 실제로 변경되었을 때만 실행
      fetchUserData(userId);
    }
  }, [userId, prevUserId]);
  
  // ...
}

초기 렌더링에서는 prevUserId가 undefined이므로 별도 처리가 필요하다. 첫 마운트 시에는 다른 로직을 태워야 하는 경우 조건문으로 분기했다.

정리

React 공식 문서 FAQ에도 소개된 패턴이다. useRef의 특성(렌더링 간 값 유지, 변경 시 리렌더링 없음)을 활용한 간단하지만 유용한 방법이었다.