React 18 출시! 새로운 렌더링 모델과 기능으로 사용자 경험을 혁신하세요.
by DD
4년 전
조회수 15
React 18 출시와 함께 자동 배치, startTransition API 등 새로운 기능 제공
Concurrent Renderer를 기반으로 UI를 여러 버전으로 동시에 준비하여 성능 향상 도모
Suspense 및 Server Components 지원을 통해 서버 사이드 렌더링 기능 강화
Concurrent Rendering의 핵심 원리
Concurrent Rendering은 React가 여러 UI 버전을 동시에 준비하는 기술이다. 구체적으로 우선순위 큐와 멀티플 버퍼링을 활용하여 UI 렌더링 중단 및 재개 기능을 제공한다. 따라서 사용자 입력에 즉각 반응하면서도 대규모 렌더링 작업을 백그라운드에서 처리할 수 있다.
Suspense와 Transition API의 활용
Suspense는 데이터 로딩 상태를 선언적으로 관리하여 로딩 UI를 쉽게 구현하도록 돕는다. Transition API와 함께 사용하면, 긴 로딩 시간을 가진 작업(예: 검색 결과)을 우선순위가 낮은 작업으로 처리할 수 있다. 결과적으로 사용자 인터랙션을 방해하지 않으면서 UI 업데이트를 수행할 수 있다.
React 18 업그레이드 및 적용 전략
React 18로 업그레이드 시, 기존 컴포넌트는 대부분 문제없이 작동한다. createRoot와 hydrateRoot API를 사용하여 새로운 렌더링 방식을 적용해야 한다. 따라서 Strict Mode를 통해 잠재적인 호환성 문제를 사전에 감지하고, 점진적으로 Concurrent Feature를 도입하는 것이 권장된다.
