프론트엔드
Transition : 쉿, 이제 안전해 나의 작은 Suspense
두줄요약
Suspense의 fallback 전환이 유발하는 화면 깜빡임 문제를 짚었습니다. React 18 Transition과 Recoil 지원 기능으로 이전 화면을 유지하는 방법을 소개합니다.
문제 상황
- Suspense의 렌더링 유예 시 fallback 전환으로 페이지 이동마다 기존 화면이 사라지는 깜빡임
- 빠른 네트워크 환경에서 로딩 상태가 짧게 노출되며 사용자 오류처럼 인식되는 UI 문제
원인 분석
- Suspense의 fallback 대체 방식으로 이전 렌더링 결과 미유지
- Recoil Loadable도 유예 중 빈 contents 전달로 이전 데이터 표시 불가
- 이전 상태 보존을 위한 별도 상태와 useEffect 추가 시 관심사 분리 및 유지보수성 저하
해결 방법
- React 18 Transition으로 값 변경에 따른 리렌더링을 변경 완료 시점까지 유예
- Recoil의 TRANSITION_SUPPORT_UNSTABLE 적용으로 Suspense 기반 데이터 유예 상태 관리 유지
적용해볼 점
- 데이터 갱신 중 기존 화면 유지가 필요한 목록·페이지 전환에 Transition 검토
- fallback 표시뿐 아니라 짧은 로딩 구간의 화면 교체 경험 점검
