React 18 마이그레이션: Concurrent Rendering과 Auto Batching으로 인한 커서 문제 해결 여정

핵심 기술

React 18의 Concurrent Rendering과 Auto Batching 도입으로 인해 발생한 동기 이벤트 처리 방식의 변화가 텍스트 에디터 개발 시 커서 렌더링 오류를 유발한 원인을 분석하고, 이를 해결하기 위한 개발자의 디버깅 및 해결 과정을 심도 있게 다룹니다.

기술적 세부사항

• 문제 상황: React 18 마이그레이션 후, 키보드 입력 시 커서가 사라지는 현상 발생. 마우스 클릭 시에는 정상 동작.
• 원인 파악:
  • 커서 렌더링을 위해 텍스트 엘리먼트의 실제 높이가 필요하며, 텍스트 컴포넌트 커밋 후 커서 컴포넌트가 렌더링되어야 함.
  • 기존 해결책: queueMicrotask를 활용하여 커서 렌더링을 지연시킴.
  • React 18에서의 변화: 텍스트 컴포넌트 렌더링이 마이크로태스크로 지연되었고, 커서 컴포넌트 역시 마이크로태스크에서 렌더링되어 텍스트 DOM 생성 전에 참조 시도, 실패.
• React 18 업데이트 내용 분석:
  • Concurrent Rendering: 여러 작업을 동시 스케줄링하고 우선순위에 따라 처리하여 응답성을 높임.
  • Lane 시스템: 업데이트 우선순위 관리 (SyncLane, InputContinuousLane, DefaultLane, TransitionLanes 등).
  • Sync Lane과 SyncQueue: Discrete Event(click, keydown 등)는 SyncLane으로 처리되며, syncQueue를 통해 동기 렌더링 함수(performSyncWorkOnRoot)가 등록되고 flushSyncCallbacks로 즉시 처리되었음 (React 17).
  • React 17 vs 18 syncQueue 처리 방식 비교: React 18에서는 syncQueue 콜백 처리가 마이크로태스크(scheduleMicrotask)로 변경되어, Discrete Event에 의한 동기 렌더링도 마이크로태스크에서 실행됨. 이로 인해 텍스트 컴포넌트 렌더링 지연 및 커서 문제 발생.
  • Auto Batching: React 18에서 기본적으로 활성화되며, 여러 상태 업데이트를 자동으로 묶어 렌더링 효율성을 높임. (본문에서는 직접적인 원인보다는 전반적인 렌더링 타이밍 변화에 기여했을 가능성 시사)
• 해결 과정:
  • 첫 번째 시도: JavaScript 이벤트 루프와 매크로태스크 활용.
  • 두 번째 시도: 이중 마이크로태스크 활용.
  • 최종 전략: 이벤트 유형별로 처리 로직을 분기하여 동기 렌더링을 필요한 시점에 정확히 수행하도록 함.

개발 임팩트

• React 18의 내부 동작 방식, 특히 Concurrent Rendering과 이벤트 처리 흐름에 대한 깊이 있는 이해를 제공합니다.
• 마이그레이션 시 발생할 수 있는 예기치 않은 문제에 대한 실질적인 디버깅 및 해결 전략을 제시합니다.
• JavaScript 이벤트 루프와 마이크로태스크/매크로태스크의 동작 방식을 실제 React 렌더링 과정과 연관 지어 설명하여 이해를 돕습니다.
• 복잡한 텍스트 에디터와 같은 인터랙티브 컴포넌트 개발 시 발생할 수 있는 렌더링 이슈 해결에 대한 인사이트를 제공합니다.