[React] 리랜더링

 

🎯 리랜더링

• 바닐라 JS -> 변경으로 인한 Element를 다시 그림
• React -> 변경된 부분만 다시 그림
  • 리액트의 장점은 리랜더링에 있다.

 

📝 JS로 만든 랜덤 버튼

const rootElement = document.getElementById("root");

function random () {
    const number = Math.floor(Math.random() * (10 - 1) + 1);
    const element = `
        <button>${number}</button>
    `;
    rootElement.innerHTML = element;
}

setInterval(random, 1000);

• 계속해서 element를 다시 그린다.
• tap을 하면 포커스가 되는데 1초 뒤 숫자가 변경되면서 포커스가 풀린다.
• 태그가 새롭게 만들어진다.

 

📝 React로 만든 랜덤 버튼

function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1);
    const element = <button>{number}</button>;
    ReactDOM.render(element, rootElement);
}

setInterval(random, 1000);

// -------------------
const rootElement = document.getElementById("root");

function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1);
    const element = (
        <>
            //<button>{number}</button>
                        <button childrem={number} /> // 동일하게 동작
            <button>{number}</button>
        </>
    );            
    ReactDOM.render(element, rootElement);
}

setInterval(random, 1000);

• 바뀌는 버튼만 변경된다. → 버튼이 새로 만들어지는 게 아니라 글자만 바뀌는 거다.
• tap해도 숫자가 변경되어서 포커스가 풀리지 않는다. 버튼은 냅두고 안에 있는 숫자만 바뀌고 있다.
• JS는 변화한 그림을 새롭게 그리는데, 리액트는 바뀐 곳만 타켓팅하여 바꿔준다.

 

📝 리액트는 어떤 알고리즘으로 랜더링 해주는 걸까?

• 두 개의 트리(바뀌기 전과 후)를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교한다.
• 리액트 엘리먼트는 불변 객체(immutable)이다.
  • 불변 객체란 변하지 않는 객체이다. 우리는 그저 ReactDOM.render(element, rootElement);로 전달할 뿐 변경 판단 및 반영은 리액트가 알아서 한다.

 

엘리먼트 타입이 다른 경우

• 두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축한다.
  • 즉, 엘리먼트 타입이 바뀌면 이전 엘리먼트는 버리고 새로 그린다.

 

DOM 엘리먼트의 타입이 같은 경우

• 두 엘리먼트의 속성(props)을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신한다.
  • 즉, key를 먼저 비교하고 props를 비교해서 변경사항을 반영한다.

 

리액트는 DOM을 어떻게 비교할까?

• 리액트는 가상 돔을 가지고 있다.
• 이전 가상 돔과 최근 가상 돔을 가지고 재조정 알고리즘을 통해서 업데이트한다.

 

🏷 요약

• 개발은 trade-off다.
• 얻는 게 있으면 하나를 잃는다. 무조건적으로 리액트가 JS보다 좋은 것은 아니다. 하나의 장점을 얻으면 하나를 잃는다.
• 리액트 엘리먼트 -> 불변 객체
• 변경 사항 반영 -> 리액트에게 일임
• 리액트의 비교 -> Reconciliation
• Virtual DOM -> 비교 시 활용

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
• 재조정 (Reconciliation) - React