0829

React Rendering

클라이언트 렌더링 vs React 렌더링

• 클라이언트 렌더링 (CSR)
  • 브라우저가 HTML/CSS/JS를 받아서 JS 실행을 통해 화면을 그리고 동적 상호작용까지 처리.
• React 렌더링
  • React는 CSR 위에서 동작. 단순히 DOM을 직접 제어하지 않고, Virtual DOM을 두고 상태 변화를 효율적으로 반영하는 방식으로 렌더링 성능을 최적화.

Virtual DOM과 변경 과정

1. 상태(state)나 props가 변경 → React가 해당 컴포넌트를 다시 렌더링하려고 시도.
2. 변경된 결과물을 Virtual DOM 트리에 반영.
3. React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교(Diffing) 후, 실제 DOM에 필요한 부분만 최소한으로 업데이트.
   → 덕분에 직접 DOM 조작 대비 성능이 안정적이고 유지보수성이 높음.

React의 재렌더링 조건

• 해당 컴포넌트의 state가 변경될 때.
• 부모에서 내려주는 props가 변경될 때.
• 부모가 리렌더링 되면 자식 함수 컴포넌트도 기본적으로 다시 실행됨. 하지만 React.memo, useMemo, useCallback 같은 최적화를 적용하면 불필요한 렌더링을 줄일 수 있음.

React Fiber와 컴포넌트 트리

• React는 내부적으로 Fiber Tree라는 구조체를 버전 16부터 도입.
• Fiber는 각 컴포넌트 노드의 정보(state, props, update queue 등)를 담고 있으며, 연결 리스트 기반의 트리 구조로 관리됨.
• 이를 통해 React는 렌더링 작업을 잘게 쪼개고, 우선순위를 기반으로 스케줄링하여 부드럽게 UI를 업데이트할 수 있음.