★ 목표 ★
React의 기본 개념인 React-DOM을 알아본다.
React-DOM
웹 브라우저는 어떻게 작동하는가
웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 "Critical Rendering Path"라고 한다.
정리하자면 다음과 같은 과정을 거친다.
대화형 페이지
사용자에게 대화형 환경을 제공하는 대화형 웹 페이지
뷰 포트
웹 페이지가 사용자에게 보여지는 영역
- DOM Tree를 구성한다.
- CSSOM Tree를 구성한다.
- 자바스크립트를 실행한다.
- 렌더 트리를 생성한다.
- 레이아웃을 생성한다.
- 페인팅
이 단계는 대략 두 단계로 다시 나눠볼 수 있다.
- 브라우저는 읽어들인 문서를 파싱하여 어떤 내용을 페이지에 렌더링할 지 결정한 뒤, 렌더 트리를 생성한다.(DOM Tree 구성, CSSOM Tree 구성, 자바스크립트 실행, 렌더 트리 생성)
- 브라우저에서 해당 렌더링을 수행한다.(레이아웃 생성,페인팅)
렌더트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성되는데, 이렇게 생성되기 위해서는 다음의 두 모델이 필요하다.
- DOM (Document Object Model) : HTML 요소들의 구조화된 표현
- CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현
DOM의 개념
DOM은 원본 HTML 문서의 객체 기반 표현 방식으로, 단순 텍스트로 구성된 HTML의 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다.
DOM의 개념을 생각할 때 주의할 것들은 다음과 같다.
- DOM은 HTML이 아니다.
DOM은 HTML 문서로부터 생성된 것이나 항상 동일하지는 않는데, 작성된 HTML 문서가 유효하지 않을 때는 DOM이 생성되는 동안 브라우저가 유효하지 않은 코드를 교정하면서 기존 HTML 문서와 달라지게 된다. 또 다른 경우로는 자바스크립트에 의해 DOM이 수정되는 경우가 있다. - DOM은 브라우저에서 보이는 것이 아니다.
브라우저 뷰 포트에 보이는 것은 렌더트리로, DOM과 CSSOM의 조합이므로, DOM과 다르다. - DOM은 개발도구에서 보이는 것이 아니다.
개발도구의 요소 검사기는 DOM과 가장 가까운 형태이나, CSS의 가상 형태 등은 개발 도구에서는 보이나 DOM의 구성 요소는 아니다.
React-DOM
함수
render()
React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환한다.
무상태 컴포넌트는 null을 반환한다.
React 엘리먼트가 이전에 container 내부에 렌더링 되었다면 해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경한다.
추가적인 콜백이 제공된다면 컴포넌트가 렌더링되거나 업데이트된 후 실행된다.
요약하자면 React 컴포넌트를 DOM에 연결하는 역할을 하는 것.
hydrate()
render()와 동일하지만 HTML 콘텐츠가 ReactDOMServer로 렌더링된 컨테이너에 이벤트를 보충하기 위해서 사용된다.
서버가 완성된 HTML을 리턴할 때, Dehydrate stores란 동적인 것을 정적으로 만드는 것을 의미한다.
Dehydrate 후 Hydrate stores 과정을 거치며 React가 정적인 HTML과 store을 동적인 React Component Tree와 store로 변환한다. 그러나 이 Hydrate 과정에서 화면이 한 번 더 render되는 현상이 일어나는데, 따라서 SSR의 경우 ReactDOM이 hydrate 메소드를 사용한다.
SSR
Server Side Rendering, 서버에서 페이지를 그려 클라이언트(브라우저)에 보낸 후 화면에 표시하는 기법.
반대로는 CSR(Client Side Rendering)이 있다.
unmountComponentAtNode()
findDOMNode()
createPortal()
참고문서
(번역) DOM은 정확히 무엇일까?
Understanding the Critical Rendering Path
ReactDOM
