어려운 코드의 특징

• 실패 성공이 함께 섞여 처리된다
• 비즈니스 로직 파악이 어렵다

그동안의 리액트

• 보통 함께 처리되서 분기해서 실패때랑 성공때랑 나눠서 처리했다

Suspense

• async await 급으로 비동기를 동기 비슷 하게 쓸수있도록 편하게 만들어줌

• 로딩과 에러는 외부에 위임 하고 컴포넌트에는 성공했을때만 다룬다

• 에러와 로딩 처리는 어떻게 하는가

  

  

  • try catch와 비슷하게 에러와 로딩을 따로 fallback 에 넣어서 처리한다

라이브러리에서 활용 가능 옵션

• Recoil : AsyncSelector
• SWR ReactQuery : suspense:true 옵션

대수적 효과

• try catch 를 쓰면 분리가 된다
• 의존성 주입과 유사

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기