[React] 당신은 상태를 필요로 하지 않을 것입니다. #4

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

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

use의 구체적인 동작은 다음과 같습니다.

use는 호출자로부터 Promise를 전달받습니다.
Promise가 추적 중인지 확인합니다. 추적 중이 아니라면 추적을 시작합니다.
추적 중인 Promise의 상태를 확인합니다. 상태에 따라 다음을 진행합니다.
1. 진행(pending) - 대기 Promise 객체를 throw 합니다. Suspense는 이를 catch 하여 await 합니다.
2. 이행(fulfilled) - 결과를 반환합니다.
3. 반려(rejected) - 오류를 throw 합니다. Suspense는 이를 catch 하지 않지만, ErrorBoundary가 이를 catch 하여 처리할 수 있습니다. 자세한 내용은 본 포스트에서 다루지 않습니다.

코드로 나타내면 아래와 같습니다.

function use<T>(promise: Promise<T>): T {
    if(!isTracking(promise)) { beginTracking(promise); }

    if(wasFulfilled(promise)) { return getValue(promise); }
    throw wasRejected(promise) ? getError(promise) : getWaiting(promise);
}

`Promise` 추적하기

Promise를 추적해야 하는 이유는 상태나 결과를 동기적으로 추출할 수 없기 때문입니다. 따라서 진행 상황에 따라 직접 정보를 갱신 및 유지해야 합니다. 그렇다면 Promise를 어떻게 추적할 수 있을까요?

enum PromiseState { PENDING, FULFILLED, REJECTED };

interface PromiseStatus<T> {
    state: PromiseState;
    waiting: Promise<void>;
    value?: T;
    error?: any;
}

const promiseStatusMap = new WeakMap<Promise<any>, PromiseStatus<any>>();

잠깐! WeakMap 사용이 처음이라면 [TypeScript] 메타데이터 관리하기(with. WeakMap)를 먼저 읽어보세요!

WeakMap을 활용하여 비교적 간단하게 구현할 수 있습니다. WeakMap에 포함 여부를 통해 간단히 추적 여부를 확인할 수 있습니다. 추적 중이라면 PromiseStatus에 접근하여 원하는 정보를 추출할 수도 있습니다.

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

function beginTracking(promise: Promise<any>): void {
    const status: PromiseStatus<any> = {
        waiting: promise.then(value => {
            status.state = PromiseState.FULFILLED;
            status.value = value;
        }).catch(error => {
            status.state = PromiseState.REJECTED;
            status.error = error;
        }),
        state: PromiseState.PENDING
    };
    map.set(promise, status);
}