코드 한 줄로 경험하는 React 동시성의 마법

문제 상황

• 검색 입력마다 수천 개 데이터를 필터링하며 렌더링이 길어져 입력 지연과 화면 멈춤 발생
• 메인 스레드 동기 작업으로 인해 사용자 입력과 무거운 목록 갱신이 서로 블로킹

원인 분석

• 브라우저 메인 스레드 단일 처리 구조로 인한 렌더링 블로킹
• 기존 Expiration Time 모델의 우선순위·배치 처리 혼재 한계

해결 방법

• React 18 동시성 렌더링과 Lane 모델로 업데이트 우선순위 분리
• useTransition, useDeferredValue로 입력 반응성과 무거운 렌더링 분리

적용해볼 점

• 사용자 입력 같은 즉시 반응 작업은 고우선순위로 유지
• 필터링, 정렬, 데이터 갱신 같은 무거운 작업은 transition으로 지연 처리