프론트엔드
React 18 에서 추가된 기능
두줄요약
React 18의 동시 렌더링, automatic batching, startTransition 등 주요 추가 기능을 소개했습니다. Suspense로 데이터 로딩 상태와 UI 표시 순서를 분리하는 방식을 설명합니다.
구조와 흐름
- 동시 렌더링 기반으로 여러 UI 버전 준비를 지원하는 React 18의 opt-in 메커니즘
- automatic batching, startTransition, React.lazy 지원 스트리밍 서버 렌더러 포함
- Suspense 경계 아래 준비되지 않은 UI를 fallback 컴포넌트로 대체하는 렌더링 방식
선택 이유
- 컴포넌트별 isLoading 상태, 조건부 렌더링, HOC·customHook 반복 코드 축소
- 데이터 읽기와 로딩 UI 제어의 관심사 분리
적용해볼 점
- Header와 List를 하나의 Suspense로 감싸 전체 준비 후 표시
- 중첩 Suspense와 placeholder로 상위 UI 우선 표시 및 하위 데이터 로딩 순서 조정
