React의 jsx 문법이 javascript 로 변환되는 과정

#react #async

리액트의 jsx 문법은 html 문법과 유사하여 UI 를 쉽게 작성 할 수 있게 해준다.

  1. jsx 문법을 작성하면
  2. jsx 를 바벨을 사용하여 js 로 변환한다. 변환된 코드는 React.createElement 함수를 사용하여 작성된다.
  3. 변환된 자바스크립트 코드를 실행한다.
    • 변환된 자바스크립트 코드는 실제로 리액트의 요소 트리를 생성하고 이를 버츄얼돔에 반영한다.

보통 바벨을 사용하여 변환을 자동 처리한다. Babel 설정파일에 babel/react-preset 프리셋을 사용하여 jsx 를 js 로 변환한다.

3번의 과정을 더 자세히 보자면..

  1. 바벨로 아래와 같이 createElement 함수를 호출하면
const element = React.createElement('h1', null, 'Hello, world!');

React.createElement 함수는 React Element 객체를 반환한다.

{ type: 'h1', props: { children: 'Hello, world!' }, key: null, ref: null }

  1. React Element 트리 생성

    • 복잡한 컴포넌트 구조에서는 여러개의 react Element 트리를 형성하기 도 한다.

  2. 가상 DOM

    • 리액트 엘리먼트 트리는 가상 DOM 트리를 형성한다. 가상 DOM 은 메모리상에 존재하는 가벼운 DOM 트리로, 가상 DOM 은 실제 DOM 과 비교적 빠르게 동기화 가능하다.

  3. ReactDOM.render() 호출

    • 리액트 컴포넌트를 실제 DOM 에 렌더링하기 위해 ReactDOM.render 함수를 호출한다.
    • 이 과정에서 react 는 가상 DOM 트리를 실제 DOM 에 반영한다.

  4. 가상 DOM 과 실제 DOM 의 비교

    • 가상돔과 실제 돔을 비교하여 변경된 부분만 실제 돔에 반영하는 과정 (리콘실레이션)
    • initial Render: 처음 ReactDom.render 가 호출 될 때, 전체 가상돔트리가 형성되고 이를 기반을 실제 돔이 만들어진다.
    • Update : 상태나 프롭스가 변경되면, 새로운 가상 DOM 트리가 형성된다. 리액트는 이전 가상돔트리와 새로운가상돔트리를 비교(diffing)하여 변경된 부분을 찾아낸다.
    • Patching : 변경된 부분만 실제돔에 반영한다. 이를 통해 전체돔을 다시 그리는 것 보다 성능을 크게 향상시킬 수 있다.