리액트의 Suspense를 활용해 선언적으로 UI를 작성해보자
heeji_
리액트의 Suspense를 활용해 선언적으로 UI를 작성해보자 React에서 데이터를 fetch하고 로딩중인지 에러가 발생했는지를 판별하고 그에 맞는 UI를 보여주는 작업은 자주 반복되는 일이다. 이번에 회사에서 React 18로 업그레이드 하면서 일부분에 이것을 선언적으로 작성할 수 있게 도와주는 Suspense를 도입했다. 이 글에서는 Suspense가 무엇인지 알아보고 실제로 적용하는 예시를 보여주려고 한다. Suspense란? React에서 제시한 동시성 컨셉과 관련된 것이다. Suspense는 비동기적으로 데이터를 불러오거나 컴포넌트를 dynamic import할 때 발생할 수 있는 지연 시간을 더 효과적으로 관리할 수 있도록 도와준다. Suspense를 활용하면 비동기 로직을 컴포넌트의 상위 ..