[React] Suspense와 선언적으로 Data fetching처리

개요

react-query와 suspense를 이용하여 비동기 작업 처리를 어떻게 하는지 알아본다

 

렌더링 시 비동기 작업 처리하는 방법

fetch-on-redner

렌더링 후 useEffect로 비동기 처리 > leads to 'waterfall'

비동기 작업을 하는 이유는 동시성을 통하여 효율성을 얻는 것인데, 동기화 처리를 하다보면 동시성을 제대로 활용할 수 없어 효율성이 떨어짐

 

fetch-then-render

화면을 그리는데 필요한 데이터를 최대한 일찍 조회 후 린더링 시작 > 데이터 조회완료까지 할 수 있는게 없음

동시성을 보장하기 위해 비동기 작업들을 한 곳에서 동시적으로 처리한다고 해도 컴포넌트들 간의 역할분담이 불명확하게 하고 높은 결합도를 만들어 진다. 코드도 깔끔하지 않고

 

render-as-you-fetch

비동기 작업과 렌더링 작업을 동시에 시작. fallback을 초기에 렌더링 하고 비동기 작업이 완료되면 다시 렌더링

children에 속하는 컴포넌트가 예외처리로 Promise를 throw로 하면 fallback property로 부터 전달받은 컴포넌트를 렌더링 한다.

예외로 던전 Promise가 완료되면 children을 다시 렌더링 한다.

 

결론

여러 API 호출시 Race condition을 다뤄야 하는데, 동기화를 포기하면 UI가 적절히 잘 나온다. 하지만 동시성을 포기하여 효율이 좋지 않다. 둘다 잡을 수 있는 방법으로 모든 API를 한번에 호출해서 뿌려주는 방법도 있지만, 컴포넌트간의 역할분담이 애매해진다. 그래서 suspense를 이용하면 해결 할 수 있다. 각각의 API 호출하는 컴포넌트를 suspense로 감싸고, loading 중일 때 promise를 throw한다. 그러면 suspense는 loading 중일 때 fallback으로 받은 컴포넌트를 렌더링 한다. API응답이 정상적으로 내려오면 해당 컴포넌트를 리렌더링한다.

suspense 단위로 fallback 컴포넌트를 구현할 수 있기에 동시에 API 호출이 가능하고 race condition을 커버할 수 있다.

 

 

Suspense와 선언적으로 Data fetching처리 | 카카오엔터테인먼트 FE 기술블로그 (kakaoent.com)

Suspense와 선언적으로 Data fetching처리 | 카카오엔터테인먼트 FE 기술블로그

 

Suspense for Data Fetching (Experimental) – React (reactjs.org)