$$config title: [ReactJS] ReactJS 이해하기 1. VanillaJS keywords: - ReactJS - VanillaJS - ... $$ # Vanilla JS로 index.html 구동하는 방법 1. html 만들기 2. javascript 가져오기 3. event 감지 4. 데이터 업데이트 (html 을 업데이트) # Vanilla JS의 구조 : html + javaScript > 전체 구조 ```js ``` - html : `` 안에 html 엘리먼트 구현 - javascript : `` 안에 javascript 구현 # 단계 1. html 만들기 (예제 : index.html) : 엘리먼트로 span과 button(id = "btn")을 만들음. ```js Total Clicks : 0 ``` # 단계 2. javascript 가져오기 : html로 구현한 엘리먼트들을 변수로 가져오기 (const button, const span) ```js Total Clicks : 0 ``` # 단계 3. event 감지 : 구현할 엘리먼트들의 event를 감지하고 eventListener로 event 설정 >event 감지 및 구현 : function ```js Total Clicks : 0 ``` ⬆️ 코드 설명 : button의 event를 감지하여 함수 추가 및 eventListener를 추가 - 함수 지정 : fucntion 함수명() { ~ } - 이벤트 추가 : 변수명.addEventListener("이벤트 명", 이벤트를 구현할 함수) # 단계 4. 데이터 업데이트 (HTML에 보이게 업데이트) : 구체적인 함수 구현 ```js Total Clicks : 0 ``` ⬆️ 코드 설명 : counter변수를 추가하여 클릭했을 때 counter를 1 추가 또한 span 안에 적을 텍스트를 `span.innerText`를 이용해서 추가 - 텍스트에 변수 추가 : ${변수명}