리엑트

https://velog.io/@jhoryong/React

React 는 front-end 개발을 위한 JavaScript 오픈소스 library 이다.

리엑트의 특징:

1. 선언형 (Declarative)
   원래의 웹 개발은 한 페이지를 보여주기 위해 HTML, CSS, JS 로 나눈다.
   리엑트는 하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용한 선언형 프로그래밍을 지향한다.

2. 컴포넌트 기반 (Component-Based)
   리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
   컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중할 수 있고, 유지보수 및 테스트 하기에도 용이하다.
   Keyword : 독립성, 재사용성

3. 범용성 (Learn Once, Write Anywhere)
   Angular는 framework로, 다른 프레임워크와는 사용할 수 없고, 해당 프레임워크 생태계에 존속된다. 하지만 리엑트는 library 이기 때문에, 기존 프로젝트를 다 고치지 않고도 사용이 가능하다.
   Facebook 에서 관리되어 안정적이고, React Native 로 모바일 개발이 가능하다.

Virtual DOM
HTTP response > DOM tree > CSSOM tree > render tree > painting
DOM 은 새로운 요청이 있으면 위와 같은 형태를 거쳐 리렌더링을 하게 된다. DOM 의 속도는 느리지 않다. 하지만 매번 새롭게 구성하기 때문에, 양이 엄청 많으면 퍼포먼스가 떨어질 것이다.
여기서 Virtual DOM 의 장점이 나온다.

리엑트는 virtual dom 을 사용하여 돔을 추상화한 자바스크립트 객체를 구성하여 사용한다. 마치 실제 dom 의 가벼운 사본과 비슷하다. 리액트에서 데이터가 변하여 웹 브라우저의 실제 dom 을 업데이트할때 다음 절차를 밟는다.
1. 전체 ui 를 virtual dom 에 리렌더링
2. 이전 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 dom 에 적용

virtual dom 을 사용한다고 해서 무조건 빠른건 아니다. 리엑트 메뉴얼에는 다음 문장이 있다.

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

리엑트와 virtual dom 이 제공하는것은 업데이트 처리 간결성이다. ui 를 업데이트 하는 과정에서 생기는 복잡함을 해소하고 쉽게 업데이트 할 수 있다.