[마스터클래스 맛보기] Suspense의 진짜 용법
- 서스펜스는 프로미스의 팬딩 상태를 관리하는 래퍼 컴포넌트이며, 데이터 패칭만을 위해 만들어진 것이 아님 ⏳
- 서스펜스는 자식 컴포넌트에서 프로미스가 던져져야 작동하며, 일반적인 패칭에서는 작동하지 않음 ⚠️
- 서스펜스는 프로미스의 펜딩, 풀필드, 리젝트 상태에 대응하여 분기 처리를 제공하며, 펜딩 상태일 때 펄백 UI를 보여줌 🔄
- 리액트 쿼리와 함께 사용할 때 서스펜스를 활성화하려면 쿼리 옵션에서
suspense: true를 설정해야 함 ⚙️
- 서스펜스를 제대로 사용하려면 비동기 과정을 선언형 프로그래밍으로 처리하고, 로딩 상태에 대한 UI를 위임해야 함 💡
- API 요청 외에도 컴포넌트 내부에서 생성되는 모든 형태의 비동기 프로세스에 서스펜스를 사용할 수 있음 💫
wrapPromise를 사용하여 프로미스를 래핑하고, 컴포넌트에서 해당 프로미스를 읽어 서스펜스와 함께 사용할 수 있음 🎁
- 서스펜스는 이미지 선캐싱, 정적 파일 로딩 등 다양한 로딩 과정에서 사용자 경험을 향상시키는 데 활용될 수 있음 🖼️
- 코스트가 큰 로직을 비동기로 처리하고, 로딩 상태를 서스펜스로 관리하여 애플리케이션의 응답성을 유지할 수 있음 🚀
- 서스펜스 사용에 대한 고정관념을 깨고, 다양한 비동기 상황에서 프로미스 반환 패턴을 활용하는 것이 중요함 🔑