본문 바로가기
IT_Developers/ReactJS

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

by 고코더 2021. 1. 26.

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


 

안녕하세요.

고코더 입니다.

 

 

 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.

 

 

 


마무리


 

재밌고 신기한 리액트

 

 

 

 

 

 

댓글0