[React] 리액트, 컴포넌트, DOM 이해

목차

---

1. 리액트(React)란?
2. 컴포넌트(component)
3. Virtual DOM이란?
4. DOM이란?
   • DOM의 단점
   • DOM의 사용되는 예시
   • 이를 개선하기 위해서는?
   • 리액트는 실제 DOM에서 어떻게 작용할까?

 

1. 리액트(React)란?

---

리액트(React)는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용된다.

 

 

2. 컴포넌트(component)

---

리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트(component)라고 한다.

컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다.

템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데 이와 달리 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

 

 

3. Virtual DOM이란?

---

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다.

 

3.1 DOM이란?

---

DOM은 Document Object Model의 약어이다. 객체로 문서 구조를 표현하는 방법으로 XML이나, HTML로 작성한다.

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다.

DOM은 트리 형태라서 특정 노드를 찾을 때, 수정할 때, 제거할 때, 원하는 곳에 삽입할 수 있다.

 

3.2 DOM의 단점

---

DOM API는 많은 플랫폼과 웹 브라우저에서 사용된다. 하지만 DOM은 동적 UI에 최적화되어있지 않다.

HTML은 자체적으로는 정적이다. 하지만 자바스크립트를 사용하여 이를 동적으로 만들 수 있다. 

 

3.3 DOM의 사용되는 예시

---

인스타그램이나 페이스북에서 스크롤바를 내릴수록 많은 데이터들이 로딩이 된다. 그리고 각 데이터를 표현하는 요소(element)들이 있다. 이 요소의 개수가 수십 개 수백 개 단위로 많아지면 느려진다.

DOM 자체는 빠르다. 그저 웹 브라우저에서 DOM에 변화가 일어날 때마다 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리렌더링 한다. 이 과정에서 시간이 허비되는 것이다.

 

3.4 이를 개선하기 위해서는?

---

리액트(React)는 Virtual DOM 방식을 사용하여 DOM업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행하게 해 준다. 

 

3.5 리액트는 실제 DOM에서 어떻게 작용할까?

---

리엑트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때 크게 3가지 절차가 있다:

 

1. 데이터를 업데이트하면 전제 UI를 Virtual DOM에 리렌더링 한다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

3. 바뀐 부분만 실제 DOM에 적용된다.