JSX & createElement() & reactDOM.render()

리액트를 사용하며 JSX를 기본적으로 사용하는데, 이번에 JSX가 어떻게 바벨을 통하여 자바스크립트 객체를 호출하여 이를 UI에 반영하는지 알아보도록 하겠습니다. 예시와 설명은 리액트 공식문서를 토대로 작성했습니다.

 

JSX

 

흔히 사용하는 jsx 중 하나입니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

바벨은 컴파일을 통하여 위의 우리가 적은 JSX를 아래와 같이 컴파일입니다.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 몇 가지 검사를 수행 한 뒤 아래와 같은 객체를 생성합니다.

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위와 같은 객체를 React Element라고 부릅니다. React 엘리먼트는 리액트 앱의 가장 단위입니다. 브라우저 DOM 엘리먼트와 달리 리액트 엘리먼트는 보이는것 과 같이 객체로 표현되며 이를 통해 화면에 표시할 내용을 기술합니다. React DOM은 리액트 엘리먼트를 반영하여 화면을 업데이트 하도록 돕습니다.

 

createElement()

React.createElement(
  type,
  [props],
  [...children]
)

JSX를 사용할 경우 React.createElement()를 호출할 일 은 없지만, 무엇인지는 알아둡시다!

 

DOM에 엘리먼트 랜더링하기

<div id="root"></div>

위 <div>는 root DOM 노드라고 부르며 리액트 앱 내 html에 보신 적이 있으실 것입니다. 이 안에 들어가는 모든 엘리먼트는 React DOM에서 관리를 합니다.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

리액트 엘리먼트를 root DOM 노드에 렌더링하기 위해서는 ReactDOM.render() 메소드로 전달을 하면 됩니다.

 

ReactDOM.render()

ReactDOM.render(element, container[, callback])

리액트 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환합니다.

리액트 엘리먼트가 이전에 container 내부에 렌더링 되었던 적이 있다면, 해당 엘리먼트를 업데이트하고 DOM에서 변경된 부분만 업데이트 합니다.