# Show GN: Suspense를 안전하고 편리하게 쓰기 위한 라이브러리, Suspensive

> Clean Markdown view of GeekNews topic #15568. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=15568](https://news.hada.io/topic?id=15568)
- GeekNews Markdown: [https://news.hada.io/topic/15568.md](https://news.hada.io/topic/15568.md)
- Type: show
- Author: [raon0211](https://news.hada.io/@raon0211)
- Published: 2024-06-28T09:56:48+09:00
- Updated: 2024-06-28T09:56:48+09:00
- Original source: [github.com/toss](https://github.com/toss/suspensive)
- Points: 13
- Comments: 0

## Summary

이 기사를 읽어야 하는 이유는 다음과 같습니다: 첫째, React에서 비동기 처리를 더 편리하게 할 수 있는 Suspensive 라이브러리를 소개합니다. 둘째, 이 라이브러리는 안전한 `<ErrorBoundary />`, 정확한 타입을 제공하는 `useSuspenseQuery()` Hook, 그리고 서버 사이드 렌더링에서도 사용할 수 있는 새로운 `<Suspense />` 옵션들을 제공합니다. 셋째, 로딩 상황을 사용자 친화적으로 보여주는 `<Delay />` 컴포넌트 등 다양한 유용한 도구들을 포함하고 있습니다.

## Topic Body

안녕하세요, 토스의 프론트엔드 개발자들이 오픈 소스로 운영하는 Suspensive 라이브러리를 소개드려요.  
  
**[React에서 Suspense 사용하기]**  
React에서 비동기를 처리하기 위해서 Suspense를 사용하면 불편함들이 있는데요.  
  
Tanstack Query의 useQuery는 정확하게 타입 추론이 안 되고, ErrorBoundary는 직접 만들거나 설치해야 하죠.  
  
**[Suspensive가 제공하는 기능]**  
- Suspense와 편리하게 쓸 수 있는 안전한 `<ErrorBoundary />`   
- Suspense 상황에서 정확한 타입을 제공하는 `useSuspenseQuery()` Hook  
- Server-side rendering에서도 안전하게 쓸 수 있는 새로운 `<Suspense />` 컴포넌트 옵션들  
- 로딩 상황을 더 사용자 친화적으로 보여주기 위한 `<Delay />` 컴포넌트  
  
이렇게 토스에서 Suspense를 사용할 때 이런 도구가 필요한데.. 싶을 때 쓰는 도구들을 모두 담았어요!  
  
**[링크]**  
자세한 내용은 Suspensive 문서도 참고해보세요.  
[https://suspensive.org/ko](https://suspensive.org/ko)

## Comments



_No public comments on this page._