2.1. JSX란?
2.1.1 JSX의 정의
구성요소는 아래의 네 가지 이다.
JSXElement
HTML의 요소와 비슷한 역할을 한다.
JSXOpeningElement: 일반적으로 볼 수 있는 요소다.
JSXOpeningElement로 시작했다면 후술할 JSXClosingElement가 동일한 요소로 같은 단계에서 선언돼 있어야 올바른 JSX 문법으로 간주된다.
- 예: <JSXElement JSXAttributes(optional)>
JSXClosingElement: JSXOpeningElement가 종료됐음을 알리는 요소로, 반드시 JSXOpeningElement와 쌍으로 사용돼야 한다.
- 예: </JSXElement>
JSXSelfClosingElement: 요소가 시작되고, 스스로 종료되는 형태를 의미한다. <script/>와 동일한 모습을 띠고 있다. 이는 내부적으로 자식을 포함할 수 없는 형태를 의미한다.
- 예: <JSXElement JSXAttributes(optional) />
JSXFragment: 아무런 요소가 없는 형태로, JSXSelfClosingElement 형태를 띨 수는 없다. </>는 불가능하다. 단 <></>는 가능하다.
- 예: <>JSXChildren(optional)</>
JSXAttributes
JSXElement에 부여할 수 있는 속성
JSXChildren
JSXElement의 자식 값을 나타낸다.
JSXStrings
2.1.2 JSX 예제
책 참고
2.1.3 JSX는 어떻게 자바스크립트에서 변환될까?
책 참고
2.2. 가상 DOM과 리액트 파이버
2.2.1 DOM과 브라우저 렌더링 과정
DOM(Document Object Model) 이란 웹페이지에 대한 인터페이스로 콘텐츠와 구조를 담고 있다.
브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정에 대해
알아보자.
브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다.
브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 트리(DOM)를 만든다.
2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다.
브라우저의 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리(CSSOM)를 만든다.
브라우저는 2번에서 만든 DOM 노드를 순회하는데, 여기서 모든 노드를 방문하는 것이 아니고 사용자 눈에 보이는 노드만 방문한다. 즉, display: none과 같이 사용자 화면에 보이지 않는 요소는 방문해 작업하지 않는다. 이는 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서다.
5번에서 제외된, 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용한다. 이 DOM 노드에 CSS를 적용하는 과정은 크게 두 가지로 나눌 수 있다.
• 레이아웃(layout, reflow): 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정. 이 레이아웃 과정을 거치면 반드시 페인팅 과정도 거치게 된다.
• 페인팅(painting): 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정.
2.2.2 가상 DOM의 탄생 배경
유저와의 인터렉션을 통해 일어나는 웹페이지 변경사항들에 대한 계산이 크기 때문에 변경이 일어났을 때 모든 DOM 의 재계산이 아니라 변경이 일어난 DOM에 대해서만 계산 하기 위해서 가상 DOM이 태어나게 되었다.
가상 DOM은 리액트가 관리하는 가상의 DOM을 의미한다.
가상 DOM은 웹페이지가 표시해야 할 DOM을 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료되었을 때 실제 브라우저의 DOM에 반영한다.
DOM계산을 브라우저가 아닌 메모리에서 한번 거치게 되게 때문에 여러 번 발생할 렌더링 과정을 최소화 할 수 있는 것이다.
2.2.3 가상 DOM을 위한 아키텍쳐, 리액트 파이버
리액트 파이버란?
리액트 파이버는 리액트에서 관리하는 자바스크립트 객체다.
파이버는 파이버 재조정자가 관리하게 되는데, 가상 DOM과 실제 DOM을 비교해 변경 사항을 수집하며, 이 둘 사이에 차이가 있을 경우 변경에 관련된 정보를 파이버 기준으로 화면에 렌더링 요청하는 역할을 한다.
2.2.4 파이버와 가상 DOM
리액트 컴포넌트에 대한 정보를 1:1로 가지고 있는 것이 파이버이며, 이 파이버는 리액트 아키텍처 내부에서 비동기로 이루어진다. 이러한 비동기 작업과 달리, 실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 일어나야 하고, 처리하는 작업이 많아 화면에 불완전하게 표시될 수 있는 가능성이 높으므로 이런 작업들을 메모리상에서 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM에서 적용하는 것이다.
