[React] 리액트 특징 : 선언형 프로그래밍, Virtual DOM

 

🖥️ React란?

Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리

• 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술

 

---

 

🖥️ React 특징

1. 컴포넌트를 기반으로 UI를 표현한다

• 컴포넌트 (Component)
  • 화면(UI)을 구성하는 구성 요소

 

2. 화면 업데이트 구현이 쉽다

• 업데이트
  • 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것

 

선언형 프로그래밍 vs 명령형 프로그래밍

선언형 프로그래밍	명령형 프로그래밍
과정은 생략하고 목적만 간결히 명시하는 것	목적을 이루기 위한 모든 일련의 과정을 설명하는 방식
마치 우리가 식당에서 주문하는 것과 유사함 “토마토 파스타 하나 주세요” 토마토 파스타를 만드는 방식은 모르겠고, 아무튼 토마토 파스타 달라는 것	마치 진상 손님처럼 주문하는 방식임 “주방으로 가셔서 면 100g을 꺼내세요. 그리고 뜨거운 물에 9분간 삶으세요. 그런 다음 후라이팬을 꺼내 불을 올리고 토마토 소스와 함께 볶으세요. 다 되었다면 접시에 담아서 나에게 가져와 주세요.”

 

React vs JavaScript

React	JavaScript
선언형 프로그래밍	명령형 프로그래밍
- 목적만 깔끔하게 명시 - 코드가 간결함	- 모든 과정을 하나하나 다 설명 - 코드가 길고 복잡함

⇒ React는 선언형 프로그래밍 방식으로, 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트 시킬 수 있다.

 

 

3. 화면 업데이트가 빠르게 처리된다

• 브라우저의 렌더링 과정 (Critical Rendering Path)
  • DOM: 요소들의 위치, 배치, 모양에 관한 정보가 있음
  • CSSOM: 요소들의 스타일과 관련된 모든 정보가 있음
  • Render Tree: Dom과 CSSOM을 합쳐서 만든 웹 페이지의 청사진(설계도)
  • Layout: 요소의 배치를 잡는 작업
  • Painting: 실제로 화면에 그려내는 과정

 

• DOM (Document Object Model)

 

• JavaScript가 DOM을 수정하면 업데이트 발생
  • (주의) Layout, Painting은 매우 오래 걸리는 과정이다
  • Reflow: Layout을 다시 한다
  • Repaint: Painting을 다시 한다

 

---

 

🖥️ Virtual DOM

• DOM을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판이다
• React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해 본다.
  • 연습 스윙 같은 느낌

 

 

[출처] 한 입 크기로 잘라먹는 리액트

•