useEffect/loading state(기존 방식)
데이터를 불러올 때 useEffect 훅을 사용하고, 로딩 상태를 관리하기 위해 loading 상태 변수로 조건에 따라 로딩 UI를 보여주는 식으로 작동하게 함
→ 간단한 상황에서는 충분히 유효하지만, 여러 개의 비동기 데이터를 다룰 때에는 조건부 렌더링 로직이 복잡해짐
Suspense
로딩중인 컴포넌트를 직접 렌더링하지 않고 데이터를 기다리는 동안에는 fallback으로 정의된 UI만 보여주고, 데이터가 모두 준비되면 Suspense에 감싸진 컴포넌트를 표시하는 방식
→ 로딩 상태를 선언적으로 관리할 수 있기 때문에, 전체적인 코드가 단순해지고 유지보수도 쉬워짐
<Suspense fallback={<Loading />}>
<SomeComponent />
</Suspense>⚠️ 단점
- 여러 개의 Suspense 컴포넌트를 중첩하거나 트리 구조로 사용할 경우, 각 Suspense가 독립적으로 로딩 상태를 관리하기 때문에 데이터 준비 시점이 다를 수 있음 → 결과 로딩 화면이 여러번 표시되거나 비일관적인 UI 경험 발생
- Suspencse는 Promise 기반의 비동기작업만 지원
일반적인 fetch 요청에 바로 적용할 수 있는 것이 아닌, 이를 위해 추가적인 라이브러리를 사용하거나 Suspense와 호환되는 형태로 Promise를 관리해야함
