Algebraic Effects 시뮬레이션으로 구현한 React Suspense의 렌더링 제어 구조

Context

기존 React 컴포넌트는 데이터 페칭을 위해 상태 관리와 Effect 처리를 수동으로 수행하는 Boilerplate 코드 발생 구조임. 렌더링 도중 데이터 부재 시 렌더링을 중단하고 외부 핸들러에 위임한 뒤 다시 복귀하는 제어 흐름의 부재가 한계점으로 작용함.

Technical Solution

• throw 메커니즘을 활용한 Signaling 체계 구축으로 컴포넌트 내부 로직과 처리 로직을 완전히 분리함
• JavaScript의 try/catch가 가진 단방향 종료 한계를 극복하기 위해 Promise를 throw 하는 시뮬레이션 기법 도입
• perform과 resume with 개념의 Algebraic Effects를 모사하여 렌더링 중단 및 재개 가능 구조 설계
• Fiber 아키텍처를 통해 현재 실행 중인 유닛을 일시 중단하고, 데이터 준비 완료 시 해당 지점부터 렌더링을 재개하는 Continuation 메커니즘 구현
• 중간 계층의 컴포넌트들이 데이터 요청 상태를 알 필요 없이 처리 핸들러(Suspense Boundary)로 직접 제어권을 전달하는 Bypass 구조 채택