[react] 개념설명

리액트

데이터가 변경되면 뷰도 변경을 해줘야합니다.

예를들어 js 변수 age = 20 이면 , HTML에도 <p>나이: 19 </p> 19를 20으로 변경을 해줘야했습니다.

 

페북개발팀에서는 데이터를 HTML에 데이터를 포함하기로 합니다.

그러면 age가 20이 되면 , HTML에도 <p>나이:  { age }</p> 따로 변경할 필요가 없어집니다.

 

리액트개발팀은 데이터가 변할때 마다 전체 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용하려 했지만,

DOM 전체를 리렌더링하는것이 너무 느렸습니다.🤨

(만약 input값에 hello 를 입력한다면 h, e, l, l, o 총 5번 이나 전체 DOM이 리렌더링 되기때문)

 

하지만 리액트는 virtualDOM 을 사용해서 전체 DOM이 5번이나 리렌더링 되지 않고 필요한 부분만 업데이트 합니다.😀 age 가 19에서 20이 변해도 전체 DOM 리렌더링은 발생하지 않습니다.

 

렌더링

리액트는 초기렌더링과 Reconciliation 과정으로 뷰를 표현합니다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

초기에는 render() 를 호출합니다.

index.js 에서 render() 함수를 호출하는 과정입니다.

<App /> 컴포넌트를 호출하는것이 보이네요.

호출하면서 렌더링됩니다. 내부에 컴포넌트도 재귀적으로 렌더링 합니다. 

컴포넌트의 렌더링이 끝나면 뷰 정보가 리턴되면서 HTML을 만들고, 실제 페이지의 DOM요소 안에 생성됩니다.

 

이후에는 Reconciliation (조화, 부분업데이트)를 합니다.

변경될때마다 전체DOM 이 여러번 리렌더링 되면 느려지니깐, 이전에 render에서 리턴된 정보로 virtualDOM을 만들어놓고, 데이터가 업데이트 된 후 render에서 리턴된 정보로 virtualDOM을 만들어 비교를 합니다. 업데이트된 virtualDOM 노드만 알아내서 DOM 트리에 업데이트합니다.

이렇게 하면 DOM 트리를 root 부터 리렌더링 할 필요가 없습니다.

 

import

자바스크립트는 브라우저에서 동작하는 스크립트니깐 모듈을 불러오는 기능이 없었습니다. HTML에서 아래와 같이 사용하곤 했습니다.

<script src="something.js"></script>

 

node.js에서는 모듈을 불러오는 기능이 있었습니다.(require)

자바스크립트가 규모가 커지면서 번들러(Webpack)를 사용하여 모듈을 불러와 브라우저에서 작업을 하는 방식으로 바꼈습니다. (React, Angular, Vue)

ES6에서 import 문이 추가 되었는데, import 를 이용해 특정경로에서 js 파일을 가져오는 것 이였습니다.

(Node.js 에서는 Common.js 방식으로 사용했지만, Node.js 버전 13.2부터 ES 모듈 시스템에 대한 정식 지원이 시작되었습니다.)

이 문법(import)을 번들러 도구가(Webpack) 이용하기로 합니다.

 

모듈을 불러올수 있고(webpack plugin), css, 이미지 파일도 불러올수 있습니다.
(이런것이 가능한 이유는 webpack plugin, css-loader, file-loader 등 이있어서 입니다)

또 웹팩은 그것을 하나로 합쳐서 하나의 파일 생성하거나, 최적화해 여러 개의 파일로 분리 할수도 있습니다.

JSX

바벨을 사용하여 JSX를 일반 자바스크립트 형태의 코드로 변환됩니다.

Babel 은 트랜스파일러(transpiler) 입니다.
바벨은 여러문법을 변환시켜주는데, 그중 react-babel plugin(or preset) 을 사용했지 때문에 React JSX를 자바스크립트 형태의 코드로 변환시켜주는 것 입니다.

 

플러그인이나 로더를 관리해주는게 웹팩의 또다른 역할이기도 합니다.