처음 만난 리액트 문서
4.3 렌더링된 Element 업데이트 하기
한 번 렌더링된 element를 업데이트 하려면 어떻게 해야 할까요? 아까 앞에서 우리는 리액트 element의 중요한 특징 하나를 배웠습니다. 바로 불변성(immutability) 입니다. element는 한 번 생성되면 바꿀 수 없기 때문에, element를 업데이트 하기 위해서는 다시 생성해야 합니다. 아래 예제 코드를 한 번 보도록 하겠습니다.
function tick() {
const element = (
<div>
<h1>안녕, 리액트!</h1>
<h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
}
setInterval(tick, 1000);
이 코드에서는 tick()이라는 함수를 정의하고 있습니다. tick()함수는 현재 시간을 포함하고 있는 element를 생성하여 root div에 렌더링 하는 역할을 합니다. 그리고 자바스크립트의 setInterval()함수를 사용해서 tick()함수를 매초마다 호출하고 있습니다. 이 코드의 실행 결과는 어떻게 될까요? 매초마다 화면에 새로운 시간이 나오게 될 것입니다. 내부적으로는 tick()함수가 호출될 때마다 기존 element를 변경하는 것이 아니라 새로운 element를 생성해서 바꿔치기 하는 것입니다.
위 그림처럼 크롬의 개발자 도구를 통해서 보게 되면 갱신되는 부분만 반짝이는 효과가 나타나게 됩니다. 매초마다 새로운 element가 생성되어 기존 element와 교체되면서 내용이 변경되고 변경된 부분에 반짝이는 효과가 나타나는 것입니다. 리액트 element의 불변성 때문에, element를 업데이트 하기 위해서는 새로 만들어야 한다는 중요한 사실을 꼭 기억하시기 바랍니다.
마지막 업데이트: 2025년 08월 21일 08시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page