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

이 영상에서는 비동기 처리를 우아하게 처리하는 방법에 대해 설명하고 있습니다. React Suspense for Data Fetching과 같은 도구를 사용하면, 간단하고 읽기 쉬운 React 컴포넌트를 만들 수 있습니다. 이를 통해 코드의 복잡성을 줄이고, 사용자 경험을 향상시킬 수 있습니다. React Suspense for Data Fetching은 'useAsyncValue'와 같은 hooks을 만들 수 있는 Low-level api를 제공합니다. 이러한 옵션을 사용해준 이후에는 자동으로 컴포넌트의 Suspense상태가 관리가 됩니다. Recoil에서는 비동기 리소스를 selector, selectorFamily로 정의할 수 있으며, 정의한 비동기 리소스를 useRecoilValue를 이용해서 가져오려고 하면 Suspense가 발생합니다. 이렇게 비동기 호출을 하는 컴포넌트를 적절히 Suspense로 감싸주기만 하면 됩니다. React hooks는 React Suspense for Data Fetching과 같은 기능을 제공합니다. 코드 복잡도를 줄이고, 상태, 이펙트, 메모이제이션과 같이 자주 발생하는 작업들을 매우 쉽게 사용할 수 있게 해줍니다. Recoil과 Suspense를 이용하여 비동기 처리를 간단하게 처리할 수 있으며, 사용자 경험을 더욱 향상 시킬 수 있는 React Current Mode, useTransition, useDeferredValue 등의 요소들을 사용한다면, React에서 컴포넌트의 렌더 트리를 부분적으로만 완성함으로써 사용자 경험을 크게 향상시킬 수 있습니다.