React.js - 엘리먼트(element) 업데이트 예제

---

리액트가 엘리먼트를 업데이트 하는 방법

---

 

안녕하세요.

고코더 입니다.

 

 

● 1.  리액트에서 엘리먼트를 랜더링을 합니다. 그러면 뷰를 통째로 날리고 다시 새롭게 뷰를 만들어준다고 배워왔습니다. 그리고 만약 변경된 부분이 적다면 이를 감지하고 해당 부분만 변경하여 업데이트 한다고 말했습니다. 오늘은 이 부분을 테스트 해보겠습니다. 리액트의 특징 중에 하나는 엘리먼트(element)에 생성된 속성(attribute)을 변경할 수 없습니다. 그저 새롭게 뷰를 만들어 업데이트 시키는 방법이 유일합니다

 

● 2. 이 부분을 소스로 설명해보겠습니다.

1번 라인 : time 이란 메서드를 생성합니다.

5번 라인 : 현재 시간을 가져오는 자바스크립트를 만듭니다.

8번 라인 : 이를 루트 노드에 랜더링 합니다.

14번 라인 : 스케줄 함수인 setInterval을 호출합니다. 이는 자바스크립트에서 사용하는 setInterval() 메서드와 동일한 기능을 합니다. 

 

function time() {
    const element = (
        <div>
            <h1>현재 시간은?</h1>
            <h2>{new Date().toTimeString()}</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}

setInterval(time, 1000);

 

● 3. 이렇게 작성된 소스는 1초마다. 서버 컴퓨터의 현재의 시간을 가져옵니다. 

 

● 4. 크롬의 개발자 도구를 켜고 해당 엘리먼트가 랜더링 되는 과정을 보면 아래와 같습니다. 1초에 한 번씩 <h1></h1>은 변하지 않고 그대로 유지되지만, <h2></h2> 부분은 계속해서 변경이 되고 있습니다. 리액트가 랜더링 하면서 변화된 부분은 업데이트하고 있습니다. 이렇게 하면 새롭게 뷰를 만드는 리액트 방식이지만 최소한의 성능으로 최대로 발휘할 수 있습니다. 

 

● 5. 코드펜에서 해당 예제를 확인해보세요.

https://codepen.io/gocoder-net/pen/abmgoLv

See the Pen 3. 엘리먼트 업데이트 예 by GoCoder (@gocoder-net) on CodePen.

 

 

 

---

마무리

---

 

재밌고 신기한 리액트