Simple Data-Fetching with React Suspense

1. 기본 아이디어

1.1 : 비동기로 데이터 호출 시, 데이터가 있으면 리턴하고, 없으면 promise를 throw한다.

function createResource(promise) {
  let status = 'pending'
  let result = promise.then(
    resolved => {
      status = 'success'
      result = resolved
    },
    rejected => {
      status = 'error'
      result = rejected
    },
  )
  return {
    read() {
      if (status === 'pending') throw result
      if (status === 'error') throw result
      if (status === 'success') return result
      throw new Error('This should be impossible')
    },
  }
}

1.2 : 1.1의 훅을 사용하는 컴포넌트를 정의한다.

function PokemonInfo() {
  const pokemon = pokemonResource.read()
  return (
    <div>
      <div className="pokemon-info__img-wrapper">
        <img src={pokemon.image} alt={pokemon.name} />
      </div>
      <PokemonDataView pokemon={pokemon} />
    </div>
  )
}

1.3 :  해당 컴포넌트를 Suspense로 감싼다.

• 서스펜스를 에러바운더리로 감싸주면 좋다.
• fallback은 로딩시 이미지를 보여준다.
• ErrorBounadary는 자바스크립트 런타임 에러, 비동기 에러 핸들링을 책임진다.

function App() {
  return (
    <div className="pokemon-info-app">
      <div className="pokemon-info">
        <PokemonErrorBoundary>
          <React.Suspense fallback={<PokemonInfoFallback name="Pikachu" />}>
            <PokemonInfo />
          </React.Suspense>
        </PokemonErrorBoundary>
      </div>
    </div>
  )
}

참고 : Errorboundary

[Epic React] Errorboundary로 선언적 에러 핸들링 :: 개발자로 성장하기 (tistory.com)

[Epic React] Errorboundary로 선언적 에러 핸들링