버튼을 몇번 클릭했는지?
기존 바닐라JS 에서 사용했던 코드
<!DOCTYPE html>
<html>
<body>
<span>total clicks : 0 </span>
<button id="btn">click me<button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter +1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>오마이갓 !! 이 코드량을 봐,
1. HTML을 만들고
2. const를 사용해서 Javascript에서 가져왔고
3. event를 감지하고
4. event를 업데이트 했네
마지막으로 HTML을 업데이트 해서 화면에 출력하도록 했지.
별거 아닌 것 같지만 이런 식으로 작업하다가는 handle handlehandlehandlehandlehandlehandlehandle 하다가 복잡해질 거고, 이런 방식으로만 작업한다면 .....
우린 앞으로 더 좋은 방식, 더 편리하고나은 아이디어, 더 설계된 방식을 배울것이다. 이 코드를 다음 시간의 React JS와 비교해봐 !!
최강 프론트엔드 개발자가 되고싶은 안유진 입니다