React.js(1)

1) React.js

 

 a. React.js 는 Angular.js, Vue.js와 같은 대중적인 SPA 라이브러리/프레임워크이다.

    * SPA : 싱글 페이지 애플리케이션, 한번 웹페이지 로딩하면 새로 로딩하지 않는 애플리케이션

    => 따라서 서버에서 새 HTML 페이지를 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션

 b. JSX : React가 한 파일에서 HTML과 자바스크립트를 함께 사용하기 위해 확장한 자바스크립트 문법

 

2) React 설치 후 파일 구성

 package.json : node.js의 패키지 목록

 public 폴터

   - index.html : 가장 처음 리턴하는 html 파일

     다른 페이지들은 React.js 를 통해 생성되고 index.html에 있는 root 엘리먼트에 동적으로 랜더링

 src 폴더 

   - index.js : 가장 처음 실행되는 자바스크립트, 컴포넌트를 root 아래 생성

 

3) 브라우저의 동작 원리 : 파싱 + 랜더링

  - 파싱 : 랜더링의 전처리 단계

      a. HTML을 트리 자료 구조형태인 DOM 트리로 변환

      b. 이미지, css, script 등의 리소스 다운로드 (이 때, CSS -> CSSOM 트리로 변환)

      c. 다운받은 자바스크립트 -> 인터프리트, 컴파일, 파싱 실행

  - 렌더링

      a. DOM 트리와 CSSOM 트리를 합쳐 렌더 트리 생성

      b. 레이아웃 지정

      c. 브라우저 스크린에 렌더 트리의 각 노드 생성 (시각화)

 

4) React 컴포넌트

  컴포넌트 : App을 이루는 최소한의 단위로 prop과 state를 통해 데이터를 입력 받고 DOM 노드를 생성

  

  index.js

import React from 'react'; //React를 사용
import ReactDOM from 'react-dom'; //React DOM 사용
import './index.css'; //css
import App from './App'; //App 컴포넌트
import reportWebVitals from './reportWebVitals';

//ReactDOM이 내부 컴포넌트를 root 엘리먼트에 render
ReactDOM.render(
  <React.StrictMode>
    <App /> //App 컴포넌트 사용
  </React.StrictMode>,
  document.getElementById('root')
);

5) 결론 

 React.js의 핵심은 컴포넌트를 DOM으로 파싱하고 랜더링을 통해 해석하고 root에 붙여주는 역할!