웹페이지에 변경이 일어나면 바닐라JS와 리액트JS는 다르게 행동합니다.
바닐라 자바스크립트
- Element를 다시 그린다.
리액트
- 변경된 부분만 다시 그린다.
실행 결과
바닐라 자바스크립트
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
// 랜덤값 생성 후 새로 그려주는 함수
const random = () => {
const number = Math.floor(Math.random() * (10 - 1) + 1);
const element = `<button>${number}</button>`;
rootElement.innerHTML = element;
};
// 1000ms 마다 랜덤함수를 호출해준다.
setInterval(random, 1000);
</script>
</body>
</html>
위의 숫자가 1000ms 마다 랜덤한 값으로 변경되는 것을 확인할 수 있습니다.
개발자 도구 - 해당 요소를 보면 1000ms마다 div element와 값을 가지고 있는 button 모두 리랜더링 되는 것을 확인할 수 있습니다.
리액트
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const random = () => {
const number = Math.floor(Math.random() * (10 - 1) + 1);
const element = <button>{number}</button>;
ReactDOM.render(element, rootElement);
};
setInterval(random, 1000);
</script>
</body>
</html>소스 코드는 동일합니다. 단순히 JSX형태로 변경 해준것일 뿐입니다.
출력되는 내용은 동일합니다
개발자 도구 - 해당 요소를 보면 버튼과 글자 태그만 리랜더링 되는 것을 확인할 수 있습니다.
결과
React는 변경되는 부분만 변경하는 것을 확인할 수 있습니다.
부모 엘리먼트에게는 영향을 주지 않는 것처럼 보입니다.
엘리먼트의 타입이 다른 경우
두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축합니다.
a tag에서 img로, Article tag에서 Comment tag로, 혹은 Button tag에서 div tag로 바뀌는 것 모두 트리 전체를 재구축하는 경우입니다.
DOM 엘리먼트의 타입이 같은 경우
같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성(key, props)을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신합니다.
- 위에서 테스트한 내용은 DOM 엘리먼트의 타입이 같은 경우 Props로 전달된 number가 계속 변경했기 때문에 리랜더링된 것입니다.
좋은 개발자가 되고싶은