[React] 당신은 상태를 필요로 하지 않을 것입니다. #3 - 비동기(with. Suspense) 편

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

파생 상태의 유형이 Promise인 경우엔 어떻게 해야 할까요? 안타깝게도 클라이언트 측에서는 비동기 컴포넌트가 지원되지 않습니다. 따라서 useState와 useEffect를 함께 사용하여 이를 해결해 왔습니다. 하지만 Suspense의 등장으로 이를 해결할 수 있게 되었습니다.

<Suspense fallback={<div>로드 중...</div>}>
    <Fulfilled promise={state}/>
</Suspense>

Suspense는 자식 요소 내부의 Promise가 모두 이행될 때까지 fallback을 표시합니다. 모두 이행되면 정상적으로 자식 요소를 표시합니다. Suspense는 Promise가 대기 중임을 어떻게 확인할 수 있을까요? 비밀은 Fulfilled에 있습니다.

Fulfilled는 Promise의 이행 결과를 표시하는 가상의 컴포넌트입니다. Promise가 대기 중이면 가장 가까운 부모 Suspense에 알립니다. Suspense는 이를 통해 fallback의 표시 여부를 결정합니다.

안타깝게도 18 버전에서는 Fulfilled를 구현할 수 있는 간단한 방법이 없습니다. 19 버전에서는 Suspense와 통신 메커니즘을 구현하는 use 훅이 제공됨에 따라 쉽게 구현할 수 있지만 18 버전에서는 그렇지 않습니다. 불행 중 다행인 것은 use를 직접 할 수 있다는 것입니다.

내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!

묻고 답하기

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