본격적으로 React를 공부하고자 한다. (근데 사실 늦은 듯.) 그렇다. 나는 사실 늦은걸 알고 나서 공부하는 사람이다. (정말 미쳤지..) 하지만 잘 해낼 수 있을 것이다. (생각보다 진도 나가는 속도가 무척 느리다. (정말 미쳤지) 자고 싶지만 이것만 마무리하고 자자,,
본론으로 들어와서 프론트엔드의 시작으로 React를 공부하고자 한다. Vue는 나름 잘 배워뒀다고 생각하는데 그렇기 때문에 React가 Vue와 비슷했으면 좋겠다. React를 시작하기 전에 (대체 언제 시작하는건가) Vanila JS에 대한 이해도가 필요하다. 사실 클론코딩만 한 와중에도 되게 새록새록하게 기억이 남. 그래도 아예 안 까먹어서 다행이다.
Project FrontEnd Leader의 추천으로 노마드 코더의 react 무료 강의를 듣고 있다. 그럼 시작해보자.
버튼을 누를 때마다 카운트가 올라가는 페이지를 만들고 싶다. (매우 기본적이지) 바로 아래와 같다.
<!DOCTYPE html>
<html>
<body>
<span> Counter : 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++;
span.innerText = `Counter : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>이 코드에 들어간 기본 메소드들을 설명하는 것이 오늘의 목표이다. (근데 이거 임시저장하면 나중에 어떻게 다시 돌아오는거지)
- getElementById (ClassName등등 많음)
HTML 에서 문서에서 지정된 ID를 가진 요소를 찾아 반환하는 함수다.
위 예제에서 ("btn")의 id를 지정받았기 때문에, <button id="btn"> 을 찾아 DOM 요소를 반환한다. 그렇기 때문에, JS 코드에서 해당 버튼에 대해 접근하고, 이에 대한 조작이 가능하다.
- addEventListener
특정 이벤트가 발생했을 때 (클릭, 마우스 오버, 키보드 입력)이 발생했을 때 실행되는 함수이다. button.addEventListener("click",handleClick); 는 클릭 이벤트가 발생했을 때, handleClick function을 실행하도록 한다.
- querySelector
CSS 선택자를 이용해, HTML 문서에서 첫 번째로 매칭되는 요소를 찾아 반환한다. 다양한 CSS 선택자를 사용하여 매칭될 수 있다. 위 예시에서는 span!
- innerText
HTML 태그 없이 순수 텍스트를 얻을 수 있다. 특정 요소의 텍스트 내용을 변경할 수 있는 것.
위의 버튼을 누르면 html text가 바뀌는 코드는 사실 단순하지만, 다양한 버튼이나 기능이 고도화되면 될수록 복잡한데, 이제 이 기능들이 react화가 되면 어떻게 변할지 살펴보자.
