<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</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>클릭횟수 : {counter}</h3>
<button onClick={countUP}>누르시오</button>
</div>
);
render();
</script>
</html>함수 3개
함수 1번(counterUP)
counter에 +1을 더해 counter로 대입한다.
render()함수를 호출한다.
함수 2번(render)
ReactDOM을 사용하여 root라는 id를 가진 div태그에 3번함수인 Container함수를 호출
함수 3번(Container)
div 안에 h3태그와 button을 출력 다른 함수들은 출력내용이 없어서 결과적으로 보여지는 곳은 이함수이며 h3태그안에 클릭횟수는 {}안에 변수를 넣어 최신화 button을 누르면 eventlitener로 onClick일시 실행되며 countUP을 불러옴 countUP함수안에 render()함수가 들어있어 최신화가 된다.
파이팅