가상돔, ReactDOM, JSX

브러우저의 랜더링 과정

1. html,css등 웹 사이트에 필요한 리소스를 다운로드
2. html은 dom트리, css는 cssom트리 생성
3. dom트리와 cssom트리를 결합해서 렌더링 트리를 생성
4. layout단계: 위치와 크기를 캡처하는 Box 모델이 출력
5. 페인팅단계: 레이아웃 단계에서 모든 계산이 완료가 되면, 화면에 요소들을 그립니다.

가상돔의 랜더링 과정

1. 브라우저의 랜더링 과정을 가상돔에서 그린뒤 실제 돔으로 그린다.
2. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 됩니다.
3. 2번에 의한 변경을 가상돔에서 그려본뒤
4. 실제돔과 차이 나는 부분만 실제돔에 적용

React

DOM에 엘리먼트가 있듯이 리액트 앱에도 엘리먼트(Element)라는 개념이 있고 이것은 리액트 앱을 구성하는 최소 단위다.

React 라이브러리가 제공하는 API 중 엘리먼트를 만들 수 있는 것이 바로 createElement() 함수다. "Hello world" 문자열을 담은 h1 엘리먼트를 만들 때 사용했다

React.createElement("h1", null, "Hello World")

콘솔 로그로 반환된 값을 찍어보면 돔 엘리먼트와 달리 일반 객체다.

type: "h1",
  props: {
    children: "Hello World"
  }

ReactDOM

리액트가 만든 가상돔은 일반 객체이다.
일반 자바스크립트 객체를 브라우저에서 동작하게 하려면 가상돔이 실제돔을 호출하면 된다.
이러한 역할을 하는 것이 ReactDOM이다.

일반 객체 모양을 갖는 가상돔은 이걸 렌더링하는 환경에 따라 여러 곳에서 사용할 수 있다.

리액트의 이러한 확장성은 데스트탑 어플리케이션 개발에도 사용될 수 있다. react-native-windows는 리액트 코드를 맥과 윈도우 환경에서 동작할 수 있게 해주는 라이브러리다

JSX

자바스크립트의 확장 문법이다. 가독성을 높이기 위해 사용한다.

jsx인 밑의 코드를

<h1>Hello world</h1>

babel을 이용해 변환할 수 있는데

React.createElement('h1', null, 'Hello world')

로 변환해준다.

참고 자료

• [리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
• [리액트 1부] 만들면서 학습하는 리액트: 소개편