React

1. React 란

사용자 UI를 만들기 위한 오픈소스 자바스크립트 라이브러리 이다.

2. React의 특징

VirtualDOM과 SPA
기존 브라우저에서 태그들을 트리구조로 만든 객체인 DOM을 통해 화면을 제어하였다.
하지만, 웹 페이지의 고도화에 따라 페이지의 크기가 커지자 매번 새로운 DOM을 전달하여 화면을 다시 표현하는데 어려움이 생겼고 이때문에 SPA라는 개념이 나타났다.

DOM을 읽고 쓰는 속도는 빠르나 실질적으로 문제가 발생하는 요소는 reflow/repaint에서 발생한다.

SPA(Single Page Application)은 하나의 페이지에서 Javascript를 통해 비동기적으로 데이터를 받아와 화면을 동적으로 생성하는 것으로, 렌더링이 클라이언트 에서 이루어지는 CSR(Client Side Rendering)이다.

개발자는 VirtualDOM을 조작하게 되고, React는 실제 DOM과 VirtualDOM을 비교하여 차이가 나는 노드만을 교체해 불필요한 화면의 갱신을 최소화 한다.

VirtualDOM 개념은 VueJS에서도 사용된다.

컴포넌트와 재사용성
React는 화면을 UI, 기능 단위의 컴포넌트로 나누어 구성 할 수 있고, 반복되는 코드를 하나의 컴포넌트로 만들어 재사용 할 수 있다.
단순히 컴포넌트를 Import한는 것 만으로 사용 할 수 있기 때문에, 유지보수와 관리에 용이하다

유연성
프레임워크가 아닌 라이브러리로서 갖는 특징으로, 다른 Javascript라이브러리나 프레임워크에서 함께 사용이 가능하다.

JSX
JSX는 Javascript 확장 문법으로 스크립트에서 Html 태그 작업을 할 수 있게 하며, Javascript 문법 또한 그대로 사용이 가능하다.

JSX는 실제로 브라우저에 표현되기 전에 Babel을 통해 스크립트 형태로 변환된다

// JSX
const JSXElement = (
  <h1 className="jsx">
    New JSXElement
  </h1>
);
// JS로 변환된 JSX
const element = React.createElement(
  'h1',
  {className: 'jsx'},
  'New JSXElement'
);

3. React Mount Process

React 공식 문서에 따르면 UI를 요청하고 제공하는 세 가지 단계가 있다고 한다.

1. 렌더링 트리거 (손님의 주문을 주방으로 전달)
2. 컴포넌트 렌더링 (주방에서 주문 준비하기)
3. DOM에 커밋 (테이블에 주문한 요리 내놓기)

앱이 최초에 시작되거나 State의 값이 바뀌는경우 렌더링/재 렌더링이 일어난다.

렌더링이 트리거되면 React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악하는데, 이 과정에서 자식 컴포넌트를 재귀적으로 렌더링한다.

컴포넌트를 렌더링 한 이후에는 DOM을 수정하는데 이를 DOM에 변경사항을 커밋한다고 한다.