seeyoujeong blog

React에서는 3가지 방법을 통해 렌더링 시 비동기 작업을 처리할 수 있습니다.

fetch on render: 컴포넌트 렌더링을 먼저 시작하고 useEffect나 componentDidMount로 비동기 처리를 합니다.

fetch then render: useEffect나 componentDidMount로 화면을 그리는데 필요한 데이터를 모두 조회한 후 렌더링을 시작합니다.

render as you fetch: 비동기 작업과 렌더링을 동시에 시작합니다. 즉시 초기 상태를 렌더링(fallback rendering)하고, 비동기 작업이 완료되면 다시 렌더링합니다.

fetch on render나 fetch then render 방식에는 아래와 같은 어려움이 있습니다.

비동기 작업들을 한 곳에서 동시적으로 처리하고, 그 결과를 컴포넌트로 전달하면 동시성을 보장할 수 있지만 컴포넌트들 간의 역할분담이 불명확해지고 결합도가 높아집니다.

위와 같은 어려움으로 인해 render as you fetch방식을 사용하는 Suspense가 등장하게 됐습니다.

Suspense는 useEffect나 이벤트 핸들러 내부에서 페칭하는 경우를 감지하지 않습니다.

Suspense를 동작시키기 위해서는 children에 속한 컴포넌트가 비동기 작업을 진행할때 예외 처리로 Promise를 throw해줘야 합니다.

또한 아래와 같은 방법을 통해 Suspense 컴포넌트를 활성화할 수 있습니다.

Suspense를 사용하면 children이 로딩을 완료할 때까지 fallback을 표시할 수 있습니다.

fallback은 로딩이 완료되지 않은 경우에 보여주는 대체 UI로 주로 로딩 스피너나 스켈레톤을 사용합니다.

Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 준비되면 다시 children으로 전환됩니다.

기본적으로 Suspense 내부의 전체 트리는 단일 단위로 취급됩니다. 예를 들어, 다음 컴포넌트 중 하나만 데이터 대기를 위해 일시 중단하더라도 모든 컴포넌트가 함께 로딩 표시기로 대체됩니다

컴포넌트가 일시 중단되면 가장 가까운 상위 Suspense 컴포넌트가 폴백을 표시합니다. 이를 통해 여러 Suspense 컴포넌트를 중첩하여 로딩 시퀀스를 만들 수 있습니다.

Suspense 사용법을 익히고 캐싱을 직접 구현하기 어려우니 react-query를 쓰자!

useDeferredValue 훅, useTransition 훅은 어렵습니다.