React.js - 엘리먼트 렌더링

Gyu·2022년 1월 24일
0

React.js

목록 보기
3/20
post-thumbnail

이 시리즈는 리액트 공식문서 및 '리액트를 다루는 기술(김민준 저)', '리액트 교과서(아자트 마르단 저)'를 바탕으로 작성되었습니다. 개인 노션에만 정리한 내용을 옮기다 보니 저도 모르게 출처 없는 타 블로그 등의 글이 있을 수 있습니다. 혹 출처를 아시는 분들은 알려주시면 감사하겠습니다.

엘리먼트 렌더링

React Element

  • React 엘리먼트는 React 앱의 가장 작은 단위이며 화면에 표시할 내용을 기술한다.
  • 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object), JSX로 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

DOM에 엘리먼트 렌더링하기

  • HTML 파일 어딘가에 <div id="root"></div>가 있다고 가정해 보자. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부른다.
  • React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.
  • React 엘리먼트를 루트 DOM 노드에 렌더링하려면 이 둘을 ReactDOM.render() 함수의 매개변수로 전달하면 된다.
    ```jsx
    const element = <h1>Hello, world</h1>;
    ReactDOM.render(element, document.getElementById('root'));
    ```
    이전 게시글에서 ReactDOM.render() 함수 설명 부분 참고

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

  • React 엘리먼트는 불변객체다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다.
  • 지금까지 소개한 내용을 바탕으로 하면 UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 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);
    // 1초마다 한 번 씩 ReactDOM.render() 호출

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

  • React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다. → 가상 DOM을 만들고 다른 부분만 DOM 업데이트. 다른 부분이 없다면 변경하지 않음
profile
애기 프론트 엔드 개발자

0개의 댓글