React 렌더링과 성능 알아보기

이 글은 React 애플리케이션의 성능 최적화를 위해 React의 동작 원리, 특히 렌더링 과정에 대한 깊이 있는 이해가 중요함을 강조합니다. React는 UI 구조를 엘리먼트 트리로 관리하며, 변경이 필요한 부분만 찾아 DOM 업데이트를 최소화하는 방식으로 동작합니다.

Virtual-DOM이라는 용어가 사용되기도 하지만, React Native에서도 동일한 방식으로 작동하는 것을 고려하면 엄밀히 말해 오용될 수 있습니다. 컴포넌트의 Props나 State 변경 시, React는 이전 엘리먼트와 새로운 엘리먼트를 비교(Reconciliation의 Diffing 알고리즘)하여 변경된 부분만 실제 DOM에 반영합니다.

엘리먼트는 Immutable하며, `setState()` 호출 시 변경 대상 컴포넌트를 등록하고 배치 작업으로 렌더링을 수행합니다. React 애플리케이션의 성능을 높이기 위해서는 이러한 렌더링 메커니즘을 정확히 이해하는 것이 필수적입니다.