reactjs.txt

React.js란

meta가 개발한 오픈소스 자바스크립트 라이브러리이다.
대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술
(넷플릭스, 페이스북, 인스타, 노션)

1. 컴포넌트를 기반으로 UI를 표현한다
2. 화면 업데이트 구현이 쉽다
3. 화면 업데이트가 빠르게 처리된다

1. 컴포넌트(구성요소)
화면을 구성하는 요소, UI를 구성하는 요소를 말함

Header.js
Main.js
Footer.js
여러 페이지에 공통으로 쓰이는 부분은 중복코드 없이 가능


2. 업데이트란
사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것.

선언형 프로그래밍 (React)
과정은 생략하고 목적만 간결히 명시하는 방법
코드가 간결함.
특정 변수의 값을 바꾸는 것 만으로도 화면을 업데이트 시킬 수 있다.
(state의 값이 바뀌면 렌더링 되기 때문에 간결하게 구현 가능)

<=> 명령형 프로그래밍 (Js)
(목적을 이루기 위한 모든 일련의 과정을 설명하는 방식)
코드가 길고 복잡함

3. 화면 업데이트
브라우저의 렌더링 과정(Critical Rendering Path)

          JS (JS가 Dom을 수정하면 업데이트가 일어남)
            ↓
HTML  →   DOM(Document Object Model ,문서 객체 모델)
            ↓
          Render Tree → Layout → Painting
            ↑
CSS   →   CSSOM

Reflow  Layout을 다시 한다
Repaint Painting을 다시 한다.

다양한 업데이트를 모아서 한번에 모아 수정하면
Virtual Dom을 buffer처럼 사용.