웹 페이지가 렌더링 되는 과정
- HTML parser가 HTML을 바탕으로 DOM tree를 그린다.
- CSS parser가 CSS를 바탕으로 CSSOM을 그린다.
- DOM에 CSSOM을 적용하여 Render Tree를 그린다.
- Render Tree를 바탕으로 Painting 하여 실제 화면에 렌더링 한다.
*HTML 코드를 읽어 내려가다가 태그를 만나면 파싱을 잠시 중단하고 js 파일을 로드한다.
DOM(Document Object Model)은 HTML 요소들의 구조화된 표현으로, 객체에 해당합니다.
DOM을 직접 조작하는건 까다로운 일, 안정성이 떨어질 뿐만 아니라, DOM API가 너무 low-level이기 때문이다. 이걸로 DOM을 조작하다 보면 코드의 복잡도가 매우 높아질 수 밖에 없습니다. 앱의 규모가 커질수록 복잡도가 높아지기 때문에, 기복적으로 돔을 직접적으로 조작하는 jQuery와 같은 라이브러리 대신, Virtual DOM 이라는 개념이 나오게 됨
https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD
React는 다음 3가지의 중요한 특징을 지니고 있습니다.
Component
리액트는 재사용이 가능한 컴포넌트를 만들고, 이 컴포넌트들이 모여 웹사이트를 구성하게 된다. 이 컴포넌트들은 결국 자바스크립트 함수(또는 객체)이다. 리액트에 내장된 Component 라이브러리의 기능을 불러온 후, 여기에 내장된 render() 메소드를 통해 ReactDOM 라이브러리에게 rendering될 컴포넌트를 전달하여 최종적으로 ReactDOM 라이브러리가 현재 DOM과 전달받은 컴포넌트를 비교하여 변경이 필요한 부분만 변화를 주어 화면에 보여주게 된다.
JSX
JSX는 React를 위해 태어난 새로운 자바스크립트 문법이다.Babel의 React 플러그인을 통해 컴파일된다. 2015년 이후 ES6이라는 새로운 자바스크립트 문법이 표준으로 등장하게 되었다. 그러나 많은 브라우저들이 이 표준과 호환되는 것은 아니다. 들은 얘기로는 어떤 대학생이 최신 자바스크립트 문법으로 프로그램을 개발해 교수에게 제출하니, 교수가 호환성이 보장되지 않으므로, 이전 버전의 자바스크립트로 개발하라고 시켰다. 그러자 그 학생이 이전버전의 자바스크립트로 만드는 대신, 최신 자바스크립트를 이전 자바스크립트로 컴파일해주는 컴파일러를 만들었는데 그게 Babel이라고 한다.
https://yngmanie.space/posts/es5_vs_es6
Virtual DOM
프론트엔드에서 DOM을 조작하는 전통적인 방식은 Imperative했다. Imperative는 DOM에 보여지길 원하는 모든 요소들을 하나 하나 정확하게 명령하는 것을 의미한다. 모든 단계를 하나하나 지정해주는 것이 명확하기는 하지만, 다양한 유저 이벤트와 edge case에서 각각의 변화가 서로 어떤 연관성을 가지는지 파악하기가 어렵다는 문제가 있다. 반면 리액트는 Declarative하다. DOM 조작은 React-DOM 라이브러리가 알아서 할 테니, 화면이 어떻게 보여지기를 원하는지를 알려주는 방식이다. 예를 들어, 화면에 보여지기를 원하는 state(state는 아주 간단히 말하면 자바스크립트 객체이다)가 청사진이 되고, 이 청사진에 의거하여 리액트가 DOM을 조작해서 화면에 구현하는 것이다.
일방향적인 데이터 흐름
React는 다음과 같은 경우에 리렌더링이 일어납니다.
1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate() 를 실행하였을 때.
4. 부모 컴포넌트가 렌더링되었을 때
SPA 어플리케이션을 가능케 하는 프론트엔드 프레임워크
