📌 UI 트리 (Virtual DOM 트리)
: 리액트는 UI를 ➡ 트리로 모델링한다.
✅ 렌더 트리 (Real DOM 트리)
: 컴포넌트(노드) 간의 관계 (부모 컴포넌트는 다른 컴포넌트의 자식이 될 수 있다.)
- Real DOM 트리
- 브라우저가 화면에 표시할 콘텐츠를 그리기 위해 사용하는 트리 구조
- 브라우저에서 DOM을 렌더링할 때 생성
- 컴포넌트만 캡슐화한다.
👉 리액트 앱에서 처리
✅ 모듈 의존성 트리 (Module Dependency Tree)
: 각 노드의 모듈을 불러와서(import) 형성하는 트리
- 애플리케이션의 모듈을 어떻게 결합하고 로딩할지(번들할 모듈)를 결정하는 데 사용
👉 번들러(Vite, CRA)에서 처리 (리액트에서 처리 X) - 코드가 빌드되거나 번들링될 때 생성
- 불러오는 모듈을(컴포넌트가 아닌 모듈도) 모두 포함한다.
- 앱의 규모가 커지면 번들 크기와 비용 증가 (번들 크기 디버깅)
트리로서 UI 이해하기 – React
The library for web and native user interfaces
ko.react.dev