렌더링

렌더링

우리가 이전에 배운 JSX를 이용해 리액트 엘리먼트를 만든 것을

기존의 DOM트리에 업데이트하는 행위를 렌더링이라고 생각하면 된다

리액트 엘리먼트는 보통 root라는 id값을 가지고 있는 DOM노드에 렌더링하는데 코드로 살펴보자

우리가 이전 시간에 배웠던 자바스크립트의 변수를 넣은 JSX를 이용해 element라는 리액트 엘리먼트를 생성했다

ReactDOM.render(element, document.getElementById('root'));

보면 생성한 리액트 엘리먼트와 root DOM트리를 인자로 넘기는 걸 볼 수 있는데

root DOM아레에 생성한 리액트 엘리먼트가 정상적으로 들어갔다

업데이트

리액트 엘리먼트는 불변객체이다

이게 뜻하는 것은 엘리먼트는 수정될 수 없기 때문에 값을 바꾸려면 엘리먼트를 새로 생성해서 렌더링해야 한다는 것

let cnt = 0;

function Count(){
    const element =(
        <div>
            <h1>This is Counter</h1>
            <h2>{cnt++}</h2>
        </div>
    );
    ReactDOM.render(element,document.getElementById('root'));
}

setInterval(Count,1000);

호출할 때 마다 1씩 값이 커지는 리액트 엘리먼트를 1초에 한번씩 렌더링하는 함수 Count다

이 코드는 짧아서 아무 문제가 없어보이지만 이 JSX가 길어진다면

1초마다 무수히 긴 JSX를 변환해서 엘리멘트를 생성한 후에 매번 새로 넣어줘야하기 때문에 매우 비효율적으로 생각될 수 있지만

개발자 도구를 열어서 변하는 부분을 보면

cnt부분만 업데이트가 되는 것을 확인할 수 있다

ReactDOM이 이전의 엘리먼트와 새로 들어오는 엘리먼트를 비교해서 업데이트가 필요한 부분만 새로 업데이트 하기 때문.