[React] UI 트리: 렌더 트리 / 모듈 의존성 트리

📌 UI 트리 (Virtual DOM 트리)

: 리액트는 UI를 ➡ 트리로 모델링한다.

 

 

 

✅ 렌더 트리 (Real DOM 트리) 

: 컴포넌트(노드) 간의 관계 (부모 컴포넌트는 다른 컴포넌트의 자식이 될 수 있다.)

• Real DOM 트리
• 브라우저가 화면에 표시할 콘텐츠를 그리기 위해 사용하는 트리 구조
• 브라우저에서 DOM을 렌더링할 때 생성
• 컴포넌트만 캡슐화한다.
  👉 리액트 앱에서 처리

 

 

 

 

✅ 모듈 의존성 트리 (Module Dependency Tree)

: 각 노드의 모듈을 불러와서(import) 형성하는 트리 

• 애플리케이션의 모듈을 어떻게 결합하고 로딩할지(번들할 모듈)를 결정하는 데 사용
  👉 번들러(Vite, CRA)에서 처리 (리액트에서 처리 X)
• 코드가 빌드되거나 번들링될 때 생성
• 불러오는 모듈을(컴포넌트가 아닌 모듈도) 모두 포함한다.
• 앱의 규모가 커지면 번들 크기와 비용 증가 (번들 크기 디버깅)

 

 

---

 

트리로서 UI 이해하기 – React