React 렌더링 원리 정리: Virtual DOM, Fiber, Lane, 업데이트 흐름
React의 렌더링 시스템은 단순한 Virtual DOM 비교를 넘어 Fiber 아키텍처 기반의 정교한 일처리 방식으로 진화해왔다. 이 글에서는 상태 업데이트가 발생했을 때 React가 내부적으로 어떤 과정을 거쳐 Virtual DOM을 비교하고 실제 DOM에 반영하는지, Fiber 트리 생성과 Lane 기반 우선순위 스케줄링, beginWork / completeWork 함수의 역할, commit phase의 효과 적용까지 전체 흐름을 코드와 함께 설명한다. 특히 React 18에서 도입된 자동 배치 처리와 비동기 처리 최적화도 함께 다룬다.
2025-03-11
0
[React] JSX 와 memo
JSX는 React.createElement() 함수로 변환되는 JavaScript 문법 확장으로, 이를 잘못 이해하면 props.children과 React.memo를 이용한 리렌더링 최적화가 제대로 동작하지 않을 수 있음을 소개해 드립니다.
2024-01-21
37
![[React] JSX 와 memo](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdkwge7cqi%2Fimage%2Fupload%2Fv1705839515%2Fpost%2Fk3uh9du93f4lgfg3ay0d.png&w=3840&q=30)