React

React에서 Element를 렌더링하는 방법

iseolin 2023. 3. 9. 17:18

React Element

React 앱의 가장 작은 단위로써, 브라우저 DOM Element와 달리 일반 객체로 쉽게 생성할 수 있습니다.
React DOM은 React Element를 기준으로 DOM을 업데이트합니다.

Rendering

React Element 를 Rendering 하기 위해서는 우선 DOM Element 를 ReactDOM.createRoot()에 전달해야합니다.

html 파일 어딘가에 <div> 가 있다고 가정합니다.

<div id="root"></div>
const root = ReactDOM.createRoot(
  document.getElementById('root')
);

이후 React Element를 root.render()에 전달해야 합니다.

const element = <h1>Hello, react!</h1>;
root.render(element);

Update

React Element는 불변객체입니다.
그렇다면 업데이트를 어떻게 할 수 있을까요?

  1. 새로운 Element를 생성하고 이를 root.render()로 전달하기.
  2. 어떠한 알고리즘을 사용하여 변경된 부분만 업데이트하기.

아무리 봐도 2번이 더 좋아보이죠?
우리는 2번에 대해 알아보겠습니다.

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

React DOM은 해당 Element와 자식 Element를 이전의 Element와 비교하고 DOM을 바꿔야하는 경우에만 DOM을 업데이트합니다.

개발자 도구를 이용해 마지막 예시를 살펴보면 이를 확인할 수 있습니다.

매초 전체 UI를 다시 그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트 하고 있네요!

댓글수0