React의 리렌더링

박상욱·2022년 2월 23일

React

목록 보기

3/20

vanilla js 와 react를 서로 같은 component를 그린다고 했을때 차이점을 알아보자

vanilla js. : 변경으로 인해 element를 다시그림
react : 변경된 부분만 다시 그림

vanilla 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);

vanilla js로 개발할 경우 tab으로 focus를 체크할 경우 button component가 계속 새로 그려지기 때문에 focus를 잃어버린다. 그렇다면 react에서는 어떨까?

React

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

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

      setInterval(random, 1000);

react는 변경 부분만 바뀐다. button은 그대로 이고 숫자만 바뀌기 때문에 focus를 잃지 않는다.

react의 좋은점?

여러개 component가 그려져 있는 화면이 있다고 생각해보자. 그럼
그중 바뀐 부분만 랜더링 한다.
예를 들어 지금 내가 react component안의 textbox안에서 글을쓰고 있다고 했을때
지금 화면 전체가 바뀌는 것이아니라 textbox의 value만 바뀌는 것이다.

react의 특징?

리액트의 앨리먼트 -> 불변객체
변경 사항 반영 -> 리액트에게 일임
리액트의 비교 -> Reconciliation(재조정)
virtual dom -> 비교시 활용

React 엘리먼트는 불변객체(immutable)입니다.
엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다.

여기서 말하는 불변의 뜻 위에 예제에서도 우리는 element를 만들어주고 setInterval로 계속하여 호출하면서 ReactDOM에 render해주었다.
여기서 이 elment가 불변이다 최초 한번 만들어지고 dom에 주입한것 뿐이다.
여기서 변경 및 판단 및 반영은 리액트가하는 것이다.
엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줍니다.
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트합니다.

어떻게 리액트가 비교하는 것일까?

이렇게 까지 공부해보면 리액트가 어떻게 element의 변경을 감지하는지 궁금해질 것이다.

virtual dom
- JQuery, Javascript - 실제 DOM을 직접처리하면 성능도 느리고 비효율적이며 처리할 데이터가 많으면 관리하기가 힘들다.
- Vitual Dom은 이를 추상화 시킨것으로 javascript 객체에 불과하며, 이 안에서 처리하는것은 이미 렌더링된 데이터를 실제 DOM API를 통해 처리하는 것보다 빠르다.
- react는 virtual dom을 이용하여 이전 virtual dom과 현재 virtual dom의 차이를 비교한다.

리액트의 비교 알고리즘
react의 두 엘리먼트 root 부터 비교
- 두 root element type이 다르면 react는 이전 트리를 버리고 완정히 새로운 트리를 구축한다.
- 두 react dom element type이 같으면? element의 속성을 확인하여 동일한 내역은 유지하고 변경된 속성들만 갱신한다.
- 위의 코드로 예를 들면 button타입이 같기때문에 key를 먼저 비교하고 속성(props)를 비교해서 props값이 같으면 그대로 다르면 변경한다.