<aside> 💡
노마드코더의 ReactJS로 영화 웹 서비스 만들기 강좌의 처음 ~ 3.4절 내용을 기반으로 작성하였습니다. 코드의 변화 과정을 극적으로 설명하기 위해, 강좌에서 등장하는 코드와는 일부 다르게 작성되었음을 알립니다.
</aside>
“무턱대고 프레임워크부터 공부하지 말라” 라는 말이 있다.
저런 류의 걱정은 대부분 “일단 이전에 쓰던 기술에 익숙해지고 나야만, 이번 기술이 이전 기술의 어떤 문제점을 어떤 방식으로 개선했는지 깊게 이해할 수 있다” 라는 생각에서 비롯된다.
이 말에 100% 동감한다!
이번 글은 JavaScript로 토이프로젝트를 제대로 한번쯤 해본 사람에게 추천한다.
JavaScript로 토이프로젝트를 하나만 해봐도, document.querySelector로 요소를 고르고, innerText 프로퍼티로 HTML을 수정하는 일이 비일비재하게 일어난다는 사실을 체감한다. (프로젝트 사이즈가 작아서 불편함을 느끼지 못했을지 몰라도, 어딘가 최적화가 덜 된 느낌 정도는 충분히 받을 수 있다.)
이번 글을 읽고 React의 탄생 배경을 겉으로나마 이해하고 나면, React스럽게 코드를 짰을 때 JS 프론트엔드 코드가 얼마나 더 가독성 있어지는지, 얼마나 더 리소스가 절약되는지에 놀라움을 금치 못할 것이다.
<aside> 💡 뭐… 말은 거창하게 React의 기술적 역사를 배우는 것처럼 써놓았지만, 단순히 Vanila JS 코드가 React스럽게 어떻게 변화하는지 설명하는 글입니다. 가볍게 봐주시기 바랍니다!
</aside>
<!DOCTYPE html>
<html>
<body>
<h3>Total clicks: 0</h3>
<button id="btn">Click me</button>
<script>
<!-- 하단에 별첨 -->
</script>
</body>
</html>
let counter = 0;
const h3 = document.querySelector("h3");
const button = document.getElementById("btn");
function handleClick() {
counter += 1;
h3.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);