2.Element

(React 공식문서의 main concepts 번역 글입니다.)

함께보면 이해가 쏙쏙
https://youtu.be/MTzS8XnD6-Q

React element는 UI를 표현하는 결과물이다.
React element는 3가지 특징을 가진다.

• React앱의 가장 작은 구성 요소

• Plain object(브라우저 DOM element과 다르게)

• 생성하는데 비용이 적게 든다

React DOM은 React element와 DOM element가 일치 하도록
DOM을 업데이트하는데 이 업데이트 과정에서
React element는 다시 렌더링된다.

React element를 DOM에 렌더링하기

React element를 DOM에 처음 렌더링하기 위해서 아래 과정을 거친다.

1. React element들이 DOM element에 소속된다.
2. 브라우저가 소속된 React element들을 DOM element로 인식한다.
3. DOM element로 인식된 React element들을 렌더링한다.

그럼 React element들은 어떻게 DOM element에 소속될까?

<div id='root'></div>

React element들은 이 div(DOM element)에 소속된다.
이 div의 이름은 ‘root’ 즉, 모든 React element의 뿌리이다.
div에 React element들이 소속되는 과정을
아래 코드를 통하여 자세하게 알아보자.

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

1. ReactDOM은 render라는 method를 실행시킨다.

2. 이때 arguments는 두가지

   • React element
   • 브라우저 DOM element

3. render method 실행 결과 React element가 DOM element에 소속된다.

   • React element가 html DOM element로 인식됨
4. 이제 DOM element로 인식된 React element가 렌더링된다.

렌더링 된 React element 업데이트하기

React element는 immutable 하다.
그러므로 아래 두가지 특징을 가진다.

• element가 생성된 후에는 children과 props를 변경할 수 없다

• 특정 시점의 UI를 나타낸다

그러므로 React element를 업데이트하는 방법은 1가지 뿐이다.

새로운 React element를 만들고, ReactDOM.render()에 넣어 실행시킨다.

아래 예시를 보자

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

위 코드를 실행시키면 setInterval에 의해
매초마다 ReactDOM.render()가 실행되는 것을 확인할 수 있는데

이것은 일반적인 방법은 아니다.
중요 : 대부분 실제 React app은 ReactDOM.render()를 한번만 실행한다.

React element의 달라진 부분만 업데이트

만약 ReactDOM.render()이 실행될 때마다
root DOM node에 소속된 모든 React element들이
다시 렌더링 된다면 너무 비효율적이다.

ReactDOM은 React element의 달라진 부분 만 업데이트한다.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

위 예제 코드를 실행시키면
하이라이팅 된 h2의 text node(달라진 부분) 만 업데이트 된다.
(콘솔창에서 확인 가능)

UI(React element)가 매 순간 어떻게 보여야할지를 고민하자.(사진처럼)
앞으로 어떻게 변화할지를 미리 고민하지 말고!

위에서 ReactDOM.render()가 대부분 한번만 실행된다고 했던 것 기억나는가?

이어지는 블로깅인 3.component, 4.state에 대해 공부하고나면
어떻게 한번만 실행될 수 있는지 그 원리를 알 수 있게될 것이다.