Vanilla JS
Total clicks: 0
Code
<![CDATA[
//클릭할 때마다 카운터 할 변수를 선언
let clickCounter = 0;
//버튼과 h3를 불러옴
const clickBtn = document.getElementById("btn");
const totalTitle = document.querySelector("#total-ttl");
//클릭 카운터 함수 정의
function handleClick() {
clickCounter = clickCounter + 1;
totalTitle.innerText = `Total clicks: ${clickCounter}`;
}
//클릭 이벤트
clickBtn.addEventListener("click", handleClick);]]>
Code
<![CDATA[
//react를 적용시킬 부모 요소를 불러옴.
const root = document.getElementById("container");
//본문에 들어갈 contents
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
};
return (
<div>
<h2>React</h2>
<h3>Total clicks:{counter}</h3>
//클릭 이벤트
<button onClick={onClick}>Click me</button>
</div>
);
}
//App을 #container 안에 출력시킴
ReactDOM.render(<App />, root);]]>