React에서 Concurrent-Safe하고 일관성 있는 useLatest Hook 구현하기

제목: React에서 Concurrent-Safe 버전의 useLatest Hook 이해와 구현하기

소개

React에서 useLatest Hook은 주로 사용되는 유틸리티로, 최신 입력 값이 포함된 ref를 반환합니다. 그러나 기존의 이 Hook 구현은 React 18의 Concurrent 모드에서는 적합하지 않거나 특정 시나리오에서 올바르지 않은 값을 반환할 수 있습니다.

기존 구현의 문제점

GitHub에서 사용 가능한 useLatest Hook의 두 가지 일반적인 구현을 자세히 살펴보겠습니다. 첫 번째 버전은 useRef Hook을 사용하고 ref의 현재 값 바로 업데이트합니다. 두 번째 버전은 useRef Hook을 useEffect Hook과 결합하여 콜백 내에서 ref의 값을 업데이트합니다. 이러한 구현은 많은 경우에 동작하지만, Concurrent 모드에서는 문제가 발생할 수 있으며, 렌더 중에 일관성 없는 결과를 제공할 수도 있습니다.

Concurrent 안전성과 일관된 값

이러한 문제를 해결하고 Concurrent 안전성을 보장하면서 올바른 값을 일관되게 반환하기 위해 수정된 버전의 useLatest Hook을 구현할 수 있습니다. 아래에 예시 구현을 제공합니다:

function useLatest<T>(val: T): React.MutableRefObject<T> {
  const ref = useRef({
    tempVal: val,
    committedVal: val,
    updateCount: 0,
  });
  ref.current.tempVal = val;
  const startingUpdateCount = ref.current.updateCount;

  useLayoutEffect(() => {
    ref.current.committedVal = ref.current.tempVal;
    ref.current.updateCount++;
  });

  return {
    get current() {
      return ref.current.updateCount === startingUpdateCount
        ? ref.current.tempVal
        : ref.current.committedVal;
    },
    set current(newVal: T) {
      ref.current.tempVal = newVal;
    },
  };
}

이 구현은 개념적인 구현이므로 실제 환경에서 사용하기 전에 철저히 테스트되어야 함에 유의하십시오.

구현 이해하기

수정된 useLatest Hook은 tempVal, committedVal, updateCount라는 세 가지 속성이 있는 내부 ref 객체를 유지합니다. tempVal 속성은 새 렌더에서 최신 값을 유지하고 있으며, committedVal 속성은 이전 렌더에서의 값을 저장합니다.

각 렌더링 중에는 useLayoutEffect Hook이 사용되어 committedVal 속성을 tempVal에서 가장 최신 값으로 업데이트합니다. 또한 변경 사항을 추적하기 위해 updateCount 속성을 증가시킵니다.

올바른 값을 일관되게 반환하기 위해 current getter는 updateCount가 startingUpdateCount와 일치하는지 확인합니다. 일치하는 경우 getter는 tempVal (최신 값)을 반환하고, 그렇지 않은 경우 committedVal (이전 값)을 반환합니다.

결론

이 블로그 포스트에서는 React에서 기존의 useLatest 구현의 도전 과제를 탐구하고, 올바른 값을 일관되게 반환하는 Concurrent 안전 버전을 소개했습니다. 구현 방법을 이해하고 그 이점을 숙지함으로써 수정된 useLatest Hook을 안전하게 React 프로젝트에 적용할 수 있습니다.

제작 환경에서 수정한 유틸리티나 Hook을 사용하기 전에 철저한 테스트를 진행하는 것을 기억하세요. 적절한 접근 방식으로 Concurrent 모드에서도 React 애플리케이션의 성능과 신뢰성을 향상시킬 수 있습니다.

참고 자료 : 

reactjs