Suspense와 기존 로딩 상태 관리 방식인 useEffect()와 loading state는 로딩 상태를 관리하는 방식에서 근본적인 차이가 있습니다. 기존 방식에서는 데이터를 불러올 때 useEffect() 훅을 사용하고, 로딩 상태를 관리하기 위해 isLoading이라는 별도의 상태 변수를 만들어야 합니다. 예를 들어, 데이터를 불러오는 동안엔 isLoading을 true로 설정하고, 데이터가 다 불러온다면 false로 바꾸는 식입니다. 그래서 조건에 따라 로딩 UI를 보여주는 식으로 작동합니다. 이 방식은 간단한 상황에서는 충분히 유효하지만, 여러 개의 비동기 데이터를 다룰 때에는 조건부 렌더링 로직이 복잡해질 수 있습니다.
반면, Suspense는 로딩 중인 컴포넌트를 직접 렌더링하지 않고, Suspense 컴포넌트의 fallback 속성으로 로딩 UI를 정의하게끔 합니다. 데이터를 기다리는 동안에는 fallback으로 정의된 UI만 보여주고, 데이터가 모두 준비되면 Suspense에 감싸진 컴포넌트를 자연스럽게 표시합니다. 이렇게 로딩 상태를 선언적으로 관리할 수 있기 때문에, 전체적인 코드가 단순해지고 유지보수도 쉬워집니다.
Suspense의 단점은 무엇일까요? 🤔
여러 개의 Suspense 컴포넌트를 중첩하거나 트리 구조로 사용할 경우, 각 Suspense가 독립적으로 로딩 상태를 관리하기 때문에 데이터 준비 시점이 다를 수 있습니다. 그 결과 로딩 화면(fallback)이 여러 번 표시되거나 비일관적인 UI 경험이 발생할 수 있습니다. 이를 적절히 제어하기 위해서는 트리의 구조와 데이터 로딩 흐름을 신중하게 설계해야 합니다.
또한 Suspense는 Promise 기반의 비동기 작업만 지원합니다. 따라서 일반적인 fetch 요청에 바로 적용할 수 있는 것이 아니라, 이를 위해 추가적인 라이브러리를 사용하거나 Suspense와 호환되는 형태로 Promise를 관리해야 합니다.
'4차산업혁명의 일꾼 > 웹개발' 카테고리의 다른 글
| localStorage와 sessionStorage의 차이점에 대해서 설명해주세요. (0) | 2025.04.29 |
|---|---|
| 프로세스보다 스레드의 컨텍스트 스위칭이 더 빠른 이유는 무엇인가요? (0) | 2025.04.29 |
| 스케일 아웃과 스케일 업의 차이점을 설명해주세요 (0) | 2025.04.28 |
| ACID에 대해서 설명해주세요. (0) | 2025.04.25 |
| 리액트 동시성 모드(Concurrent Mode)에 관해서 설명해주세요. (0) | 2025.04.25 |