컴포넌트를 통한 프로젝트 구성, 단방향 데이터 바인딩 Virtual Dom에 대해 알아보자.

1. Rendering 이란

: html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다.

2. DOM이 왜 비효율적인가?

: 브라우저의 작동 방식에 대해 알아보자.

• 브라우저가 HTML을 받으면, 브라우저는 DOM으로 이뤄진 렌더 트리를 만든다.
• 렌더 트리를 구성하고 나면 각 노드들은 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할 지 레이아웃을 정하게 된다.
• 이 과정은 전부 동기적(synchronous) 작업이다.
• 즉 DOM에 변화생기면, 렌더 트리를 재생성해야하고 레이아웃을 만드는 과정 등등이 모두 다시 반복되는것이다.
  비효율적이겠죠??

2. Virtual DOM 렌더링 방식

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

: 조금 쉽게 설명해보자.
실제 DOM에 적용되기전에 가상의 DOM에 먼저 적용시키고 그 최종적인 결과를 실제 DOM으로 전달해준다는 것이다.
이로써, 브라우저 내에서 발생하는 연산의 양을 줄어들게 되는 것이다.

• 아래와 같이 렌더링 함수를 호출하면 가상의 돔을 만들기 시작한다.

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

• 구조 : ReactDOM.render(넘기고자 하는 리액트 엘리먼트, 렌더 하고 싶은 부모 컨테이너)

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

• JSX를 JS로 컴파일 하면 위와 같은 내용인 것은 이전에 설명해서 알고 있을 것이다.
• render() 함수를 호출할때 React.createElement(App) 객체를 파라미터로 전달하며,
  render() 함수는 React에서 사용하는 타입의 컴포넌트를 생성한다.