React :: Element Rendering (엘리먼드 렌더링)

Element ?

Element 는 React 의 가장 작은 단위로, 화면에 표시할 내용을 기술한다.

• 브라우저 DOM Element 와 달리, React Element 는 일반 객체이다.
• React DOM 은 React Element 와 일치하도록 DOM 을 업데이트한다.
• Component 의 "구성 요소"이다.
  Element 와 Component 는 다른 개념이다. Component 는 다음에 자세히!
• 불변객체이다. (즉, 생성 이후에 자식/속성 변경 불가)

 

Element 작성하기

JSX 를 살펴볼 때, 이렇게 작성한 것이 바로 element 를 작성한 것이다.

const element = <h1>Hello, world</h1>;

 

DOM 에 Element 렌더링하기

이제 작성한 Element 를 렌더링 해보자.

Root DOM Node

React 로 구현된 어플리케이션은 일반적으로 하나의 루트 DOM 노드가 있고, 그 루트 DOM 노드 안에 들어가는 모든 엘리먼트를 React DOM 에서 관리한다.

만일 여러 React 앱을 통합하려 한다면 그만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.

 

ReactDOM.render()

React Element 를 루트 DOM 노드에 렌더링하려면 ReactDOM.render() 로 전달하면 된다.

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

 

렌더링 된 엘리먼트 업데이트하기

앞서 말했듯, React Element 는 불변객체이다.

한 영화의 한 프레임. 정해져 있는 '장면'을 보여주는 것과 같다.

 

따라서 가장 간단히 UI 를 업데이트 (엘리먼트 업데이트) 하는 방법은 변경하는 사항에 대한 Element 를 새로 생성하고 이를 ReactDOM.render() 에 전달하는 것이다.

 

React 공식 문서의 시계 예제를 통해 살펴보면,

function tick() {
  const element = (	//함수 호출 시마다 element 새로 생성
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));	//새로 생성한 element 렌더링
}

setInterval(tick, 1000);

이렇게 할 수 있다.

변경 사항만 업데이트하기

위의 코드만 보면 Hello world 부터 시간 까지 모두 렌더링을 하는 것인가? 하는 의문이 생길 수 있지만,

React 는 기존의 DOM 과 비교하여 변경 사항만 업데이트한다고 했었다.

 

그러니, 개발자 도구를 통해 위의 코드 실행을 보면 딱 시간만 바뀐다는 것을 알 수 있다.

즉, 이전과 달라지는 {new Date().toLocaleTimeString()} 부분만 업데이트 된다는 것을 확인할 수 있다.

 

 

이것은 Element 를 업데이트하는 한 가지 방법이다.

이후에 생명주기 API , 조건부 렌더링을 배우며 더 다양한 방법으로 렌더링을 해보자.

 

---

Ref.

React 공식 문서 ko.reactjs.org/docs/rendering-elements.html

.