[React] React 가이드(동작 원리 및 엔진)

1. React란 무엇인가?

React는 Facebook(Meta)에서 개발한 "JavaScript 라이브러리"로, UI(User Interface) 구축을 위한 컴포넌트 기반의 프레임워크입니다. React의 핵심 목표는 빠르고 효율적인 UI 렌더링이며, 이를 위해 Virtual DOM과 선택적 렌더링(Reconciliation) 기법을 사용합니다.

 

2. React의 동작 원리

React의 주요 동작 방식 =>

2.1 Virtual DOM

React는 Virtual DOM(가상 DOM) 을 사용하여 실제 DOM 조작을 최소화합니다. Virtual DOM은 메모리 내에서 UI의 가상 트리를 유지하며, 변경 사항이 감지되면 최소한의 실제 DOM 업데이트만 수행합니다.

2.2 Reconciliation (조정 과정)

• 상태(state)나 속성(props)이 변경되면, React는 새로운 Virtual DOM을 생성합니다.
• 기존 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분만 업데이트합니다.
• 변경된 부분을 실제 DOM에 반영한다.

2.3 Fiber 아키텍처

React 16부터 도입된 "Fiber 아키텍처"는 비동기 렌더링을 지원하고, 작업을 우선순위 기반으로 분할하여 수행합니다. 이를 통해 React는 대규모 애플리케이션에서도 부드러운 UI 업데이트를 제공합니다.

2.4 React의 이벤트 시스템

React는 SyntheticEvent를 사용하여 브라우저 간의 이벤트 동작을 통합 관리합니다. 이를 통해 성능을 최적화하고, 일관된 이벤트 처리가 가능합니다.

3. React와 기존 웹 시스템의 차이점

3.1 SPA(Single Page Application) vs MPA(Multi Page Application)

기존의 웹 애플리케이션(MPA)은 사용자가 새로운 페이지를 요청할 때마다 전체 페이지를 다시 로드해야 했습니다. 반면, React는 SPA 방식으로 동작하며, 클라이언트에서 페이지를 동적으로 변경하여 성능을 최적화합니다.

 

차이점 요약 =>

• MPA : 새로운 페이지를 불러올 때마다 전체 HTML, CSS, JS를 다시 로드 = 속도 저하
• SPA : 최초 로드 이후 필요한 부분만 변경 = 빠른 UX 제공

3.2 BOM(Browser Object Model)과 React

기존 웹 시스템에서는 BOM을 직접 조작하여 페이지 내 요소를 업데이트했습니다. 예를 들어, document.getElementById() 같은 방법을 사용했습니다. 하지만 React는 Virtual DOM을 활용하여 BOM을 직접 조작하는 대신, 변경 사항을 효율적으로 관리합니다.

4. React의 주요 장점

1. 컴포넌트 기반 아키텍처 – UI를 작은 재사용 가능한 컴포넌트로 분리하여 개발을 효율적으로 수행할 수 있다.
2. Virtual DOM을 활용한 최적화 – DOM 조작을 최소화하여 렌더링 성능을 향상시킨다.
3. 강력한 커뮤니티와 생태계 – Redux, Next.js, React Query 등과 함께 사용하여 확장성이 뛰어나다.
4. React Native와 호환 가능 – 웹뿐만 아니라 모바일 앱(Android, iOS)도 개발할 수 있다.
5. 비동기 렌더링 지원 – Fiber 아키텍처를 통해 성능을 최적화하고, 인터랙션을 부드럽게 한다.

6. React 엔진 구조와 핵심 개념

React는 내부적으로 렌더링 엔진과 조정(Reconciliation) 엔진으로 나뉜다.

6.1 렌더링 엔진

• React의 렌더링 엔진은 UI를 Virtual DOM을 통해 조작하고, 변경 사항을 효율적으로 처리한다.
• React는 UI 업데이트를 최적화하기 위해 "Fiber 아키텍처"를 도입했다.
• UI 변경 사항을 배치(batch) 처리하여 렌더링 성능을 극대화한다.

6.2 조정(Reconciliation) 엔진

• 기존 Virtual DOM과 새로운 Virtual DOM을 비교하여 차이점(Diffing Algorithm)을 찾는다.
• 최소한의 실제 DOM 변경만 수행한다. 이를 통해 성능을 극대화한다