Antigravity Agent
4.7 KiB
React 18 & 19 Performance Optimization
📌 Brief Summary
React 18 및 19의 성능 최적화는 동시성 렌더링, 자동 배칭(Automatic Batching), 그리고 빌드 타임 컴파일러를 통해 불필요한 렌더링을 최소화하고 UI 반응성을 극대화하는 기술적 진보를 의미합니다 [1-4]. React 18은 다양한 비동기 이벤트의 상태 업데이트를 한 번에 묶는 자동 배칭과 useTransition을 통한 동시성 훅을 도입했습니다 [3, 5, 6]. React 19는 React Compiler를 도입하여 수동 메모이제이션의 부담을 없애고, [React Server Components|React Server Components] 아키텍처를 통해 클라이언트로 전송되는 JavaScript 번들 크기를 획기적으로 줄였습니다 [2, 4, 7, 8].
📖 Core Content
-
React 18 자동 배칭(Automatic Batching) React 18부터는 프로미스,
setTimeout, 네이티브 이벤트 핸들러 내부에서 발생하는 상태 업데이트까지 모두 한 번의 리렌더링으로 묶어서 처리하는 자동 배칭이 기본으로 적용됩니다 [3, 9, 10]. 이를 통해 Virtual DOM 디핑(Diffing) 연산을 최소화하며, 특정 데이터 집약적인 대시보드 사례에서는 렌더링 횟수를 최대 40% 줄이고 프레임 속도를 25% 향상시키는 성과를 냈습니다 [1, 11, 12]. 만약 즉각적인 DOM 업데이트가 반드시 필요한 경우라면[[flushSync|flushSync]]API를 사용하여 자동 배칭을 우회할 수 있습니다 [12-14]. -
동시성 렌더링 기능(Concurrent Features) React 18/19의 동시성 훅인
useTransition과[[useDeferredValue|useDeferredValue]]는 메인 스레드가 차단되는 것을 방지합니다 [5, 12, 13]. 타이핑이나 클릭과 같은 긴급한 상호작용 업데이트와, 대용량 리스트 필터링 등 비긴급 상태 업데이트를 분리 처리하여 앱의 INP(Interaction to Next Paint) 지표를 크게 개선합니다 [5, 12, 15-17]. -
React 19 Compiler와 자동 메모이제이션 2025년 말 안정화된 React Compiler는 빌드 타임에 추상 구문 트리(AST)를 분석하여 데이터 흐름을 파악하고 최적의 위치에 자동으로 메모이제이션 경계를 삽입합니다 [2, 18-21]. 이 컴파일러는 참조 동일성 문제로 발생하는 연쇄적인 리렌더링(Re-render Cascade)을 근본적으로 방지하며, 개발자가 직접
useMemo,useCallback,React.memo를 수동으로 작성해야 하는 인지적 부담을 덜어줍니다 [2, 4, 22, 23]. 정밀한 자동 메모이제이션 덕분에 Meta 내부 테스트에서는 렌더링 횟수가 60% 감소하고 사용자 상호작용 속도가 2.5배 향상되었습니다 [24]. -
React Server Components (RSC) 활용 RSC는 렌더링과 컴포넌트 로직이 서버에서만 배타적으로 실행되는 새로운 아키텍처로, 클라이언트 JavaScript 번들 사이즈에 추가 바이트를 발생시키지 않습니다(0 바이트) [7, 8, 25, 26]. 클라이언트에서 여러 번 발생하는 데이터 페칭 왕복(waterfall)을 유발하는 대신, 서버에서 직접 데이터베이스나 로컬 시스템에 안전하게 접근하여 처리한 뒤, 직렬화된 React 명령(React Flight 프로토콜)과 HTML만을 클라이언트에 스트리밍하여 초기 로딩 속도와 보안을 개선합니다 [27-31].
-
기본적인 성능 최적화 기법 최신 렌더링 기능 외에도, 성능 확보를 위해서는 긴 목록 렌더링 시 가상화를 적용하는
react-window라이브러리 사용, 라우트 단위의React.lazy()를 이용한 코드 분할, 그리고 인라인 객체 및 함수의 불필요한 생성 방지 같은 원칙적인 최적화가 꾸준히 권장됩니다 [32-35].
🔗 Knowledge Connections
- Related Topics:
[[Automatic Batching|Automatic Batching]],React Compiler,Concurrent Rendering,[[React Server Components|React Server Components]] - Projects/Contexts:
[[Next.js App Router|Next.js App Router]],[[Virtual DOM|Virtual DOM]] - Contradictions/Notes: 소스 자료에 따르면 React Compiler가 최적화의 90% 이상을 자동화하고 대부분의 경우
useMemo와useCallback을 대체하지만, Effect 종속성을 명시적으로 제어해야 하거나 타사 라이브러리의 참조 안정성이 필수적인 밀리초 단위의 중요한 성능 경로(Critical performance path)에서는 여전히 수동 메모이제이션이 "이스케이프 해치(Escape Hatch)"로 작동해야 한다고 강조합니다 [36-39].
Last updated: 2026-04-25