React18의 Concurrent Mode 개념 완벽히 이해하기!

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• React 개발자, 특히 React 18으로 전환 중인 프론트엔드 개발자*
• 난이도: 중급~고급 (동기/비동기 렌더링, 작업 우선순위 개념 이해 필요)*

핵심 요약

• Concurrent Mode 는 중단 가능한 렌더링 과 작업 우선순위 기반 스케줄링 을 통해 사용자 입력 반응성 을 극대화
• Time Slicing 으로 대규모 작업 분할 및 Suspense 와 통합해 비동기 로딩 상태 관리
• Automatic Batching 을 통해 모든 상황에서 상태 업데이트 배치 처리

섹션별 세부 요약

1. 동기 렌더링의 문제점

• UI 블로킹 : 대규모 컴포넌트 트리 렌더링 시 사용자 입력 지연
• 애니메이션 끊김 : 60fps 유지 불가능
• 비동기 요청 처리 불균형 : 이벤트 핸들러 내부/외부에서 렌더링 방식 차이

2. Concurrent Mode의 핵심 개념

• 중단 가능한 렌더링 : 작업을 작은 시간 단위(slice) 로 나누어 처리
• 작업 우선순위(Task Priority) : 사용자 입력(Immediate), 사용자 차단(User Blocking), 일반(NORMAL), 저우선(LOW), 유휴(IDLE)
• Suspense 통합 : 비동기 작업의 로딩 상태 우아한 처리

3. Automatic Batching

• React 18 : 모든 상황(이벤트, Promise, useEffect 등)에서 자동 배치 처리
• React 17 이전 : 이벤트 외부에서는 개별 렌더링 발생

4. Time Slicing 예제

• LargeList 컴포넌트 : useTransition 으로 낮은 우선순위 업데이트 처리
• VirtualizedList : 스크롤 이벤트 를 높은 우선순위로 즉시 처리

5. 사용자 경험 향상 요소

• 즉시 반응성 : 사용자 입력에 즉시 처리
• 부드러운 애니메이션 : 60fps 유지 가능
• 배터리 수명 최적화 : 불필요한 작업 최소화

결론

• useTransition 과 Suspense 를 적극 활용해 우선순위 기반 렌더링 구현
• Time Slicing 을 통해 대규모 작업 분할 및 자동 배치 처리 적용
• Concurrent Mode 는 사용자 경험 중심 의 렌더링 전략을 제공하며, React 18 이상에서만 지원 됨