트리로서 UI 이해하기

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/understanding-your-ui-as-a-tree

트리로서의 UI

1️⃣ 트리와 UI의 관계

트리는 요소와 UI 사이의 관계를 모델링함

UI는 트리 구조를 사용하여 표현됨

2️⃣ 트리 구조의 활용

브라우저는 HTML(DOM)과 CSS(CSSOM)을 트리 구조로 모델링

모바일 플랫폼도 뷰 계층 구조를 트리로 표현

React는 컴포넌트로부터 UI 트리를 생성합니다. 이 예에서 UI 트리는 DOM을 렌더링하는 데 사용됩니다.

React는 컴포넌트로부터 UI 트리를 생성합니다. 이 예에서 UI 트리는 DOM을 렌더링하는 데 사용됩니다.

1️⃣ React와 트리 구조

React는 컴포넌트 간의 관계를 관리하기 위해 트리 구조 활용

2️⃣ 트리 구조의 역할

데이터 흐름, 렌더링, 앱 크기 최적화 이해에 도움

렌더 트리

1️⃣ 컴포넌트 중첩 구조

컴포넌트는 다른 컴포넌트로 구성되며 부모-자식 관계 형성

2️⃣ 렌더 트리

React는 컴포넌트 관계를 트리 구조로 모델링하여 렌더링 수행