기술 블로그

[React] 대규모 데이터 편집 시 발생하는 입력 지연 분석: Fiber 트리 순회와 브라우저 ReflowReact 환경에서 수천 건의 데이터를 동시에 다루는 편집 UI를 구현하다 보면, 단순한 최적화만으로는 해결되지 않는 성능 병목을 마주하곤 합니다. 최근 약 3,800건의 매출 데이터를 수정하는 모달에서 입력 시 약 5초간의 지연(Input Lag)이 발생했던 사례를 통해, React 내부 동작과 브라우저 렌더링 엔진의 관점에서 그 원인을 분석하고 해결 과정을 기록합니다.1. 현상 및 초기 진단규모: 약 3,822행 (행당 Input 및 SelectBox 등 10여 개의 컴포넌트 포함)문제: 특정 입력 필드에 타이핑 시 화면이 수 초간 프리징됨.초기 가설: 검색 필터링 로직의 부하 혹은 부모 컴포넌..