카카오엔터 개발자, React Suspense로 비동기 데이터 처리와 경쟁 상태 해결법 공유

카카오엔터테인먼트 페이지 서비스 개발팀 프론트엔드 개발자가 React Suspense를 활용한 비동기 데이터 처리 방식을 소개했다. 기존 Fetch-on-render나 Fetch-then-render 방식은 컴포넌트 생명주기와 비동기 작업의 동기화 과정에서 **경쟁 상태(Race Condition)**나 Waterfall Problem을 유발할 수 있다.

기존 방식의 한계는 다음과 같다.

• Fetch-on-render: 데이터 조회와 렌더링을 분리하면, 상위 컴포넌트의 데이터가 먼저 도착해야 하위 컴포넌트가 조회를 시작할 수 있어 동시성이 떨어진다.
• Fetch-then-render: 모든 데이터를 한곳에서 조회하면 동시성은 확보되지만, 컴포넌트 간 역할 분담이 불명확해져 높은 결합도를 초래한다.

Suspense를 적용하면 비동기 작업과 렌더링을 동시에 시작하는 Render-as-you-fetch 패턴을 구현할 수 있다. 컴포넌트가 Promise를 throw하면 fallback을 렌더링하고, Promise가 완료되면 실제 데이터를 렌더링한다. 이를 통해 동기화 로직을 제거하고 각 컴포넌트가 자신의 데이터를 독립적으로 처리하도록 하여, 코드의 복잡도와 결합도를 낮추고 선언적인 코드 작성이 가능해진다.