- state : 데이터가 저장되는 곳
- js
- body, span등등이 다 업데이트 됨
- ->노드정보가 바뀔때마다 노드트리를 처음부터 다시 5단계에 걸쳐서 생성
- react
- ui에서 바뀐 부분만 업데이트해줌
- 이전에 렌더링된 컴포넌트는 어떤거였는지 확인, 다음에 렌더링될 컴포넌트는 어떤지를 보고 다른 부분만 파악
- ->가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져줌
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<!-- ReactDom이 react element를 가져다 놓을 곳 -->
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUp() { //함수
counter = counter + 1;
render(); //값을 바꿀때마다 리렌더링
}
function render(){ //함수
ReactDOM.render(<Container />, root);
}
const Container = () => ( //함수
<div>
<h3>Total clicks:{counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
