Home [React] 엘리먼트 렌더링
Post
Cancel

[React] 엘리먼트 렌더링

[React] 엘리먼트 렌더링

  • 엘리먼트는 React 앱의 가장 작은 단위
  • 엘리먼트는 화면에 표시할 내용을 기술
1
const element = <h1>Hello, world</h1>;
  • 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이며, 쉽게 생성
  • React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트
  • 엘리먼트는 컴포넌트의 구성 요소이므로 개념이 다르다.

DOM에 엘리먼트 렌더링하기

  • React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 존재
  • React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 존재할 수 있음
  • React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render() 로 전달하면 된다.
1
2
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById("root"));

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

  • React 엘리먼트는 불변객체
  • 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성 변경 불가능
  • 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줌
  • UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것
1
2
3
4
5
6
7
8
9
10
11
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);

변경된 부분만 업데이트하기

  • React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교 후, DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트
  • 위의 예시 코드는 매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만, React DOM은 내용이 변경된 텍스트 노드만 업데이트

References

This post is licensed under CC BY 4.0 by the author.

[React] JSX 소개

Daily Commit 분포 확인하기