[React] 당신은 상태를 필요로 하지 않을 것입니다. #2 - 보존(with. useRef) 편

이 포스트는 React 버전 18.3.1을 기준으로 합니다.

이번 편은 이전 편으로부터 이어집니다.

useMemo의 대안으로 useRef를 생각해 볼 수 있습니다. 이를 이용하면 결과 보존을 보장할 수 있지만 파생 상태를 운용하기 적합한 형태는 아닙니다. 부족한 점은 크게 두 가지로 생각해 볼 수 있습니다.

1. 생성 함수를 지원하지 않습니다. 조건에 따라 연산 수행 여부를 결정하려면 필수적입니다.

2. 의존성을 지원하지 않습니다. 연산 수행은 의존성의 변경 여부에 따라 결정되므로 필수적입니다.

두 조건을 충족하기 위해 아래와 같이 구현할 수 있습니다.

function <S>(factory: () => S, deps: React.DependencyList): S {
    const state = useRef<S>();
    if(!useDependenciesComparison(deps)) { ref.current = factory(); }
    return ref.current!;
}

useDependenciesComparison은 의존성 변경을 감지하기 위한 가상의 훅입니다. 최초이거나 의존성이 변경되었다면 false를, 그 외엔 true를 반환하도록 구현해야 합니다. 이를 통해 캐시를 항상 최신 상태로 유지할 수 있습니다.

의존성 변경 감지하기

useDependenciesComparison은 아래와 같이 구현할 수 있습니다.

function useDependenciesComparison(deps: React.DependencyList): boolean {
    const ref = useRef<React.DependencyList>();

    const hit = compareDependencies(ref.current, deps);
    if(!hit) { ref.current = deps; }

    return hit;
}

useRef를 통해 의존성을 지속적으로 갱신 및 유지하고, 가상의 함수 compareDependencies를 통해 의존성을 서로 비교합니다.

compareDependencies의 구현은 이전 의존성으로 undefined가 올 수 있고, 이때 false를 반환해야 함만 유의한다면 쉽게 구현할 수 있을 것입니다.

시리즈는 다음 편에서 계속됩니다. 읽어주셔서 감사합니다!

주인장의 라이브러리

블로그 주인장이 구현한 라이브러리입니다! 기능을 직접 구현하는 대신 사용할 수 있습니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.