리액트 동작 원리

리액트는 DOM을 직접 제어하는 방식이 아니라 중간에 가상의 Virtual DOM을 둔다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 하게 된다.

 

 DOM에 엘리먼트 렌더링하기

 ReactDOM.render(
    React.createElement(App)
  , document.getElementById('root'));

ReactDOM.render

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

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

React 엘리먼트가 이전에 container 내부에 렌더링 되었다면 해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경한다. 추가적인 콜백이 제공된다면 컴포넌트가 렌더링되거나 업데이트된 후 실행된다.

 

React.createElement()

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

인자로 주어지는 타입에 따라 새로운 React 엘리먼트를 생성하여 반환한다. type 인자로는 태그 이름 문자열('div' 또는 'span' 등), React 컴포넌트 타입, 또는 React Fragment 타입 중 하나가 올 수 있다. JSX로 작성된 코드는 React.createElement()를 사용하는 형태로 변환된다. JSX를 사용할 경우 React.createElement()를 직접 호출하는 일은 거의 없다.