오래 못 할 짓 하지 않기
[ React ] 1. 리액트 기초 ( JS version ) 본문
728x90
<body>
<span>Total clicks: 0</span>
<button id = "btn">click here</button>
</body>
span = 줄바꿈이 되지 않는 div
이렇게 만들었을 떄 나오는 페이지는
이런 모양이고 버튼을 클릭해도 큰 차이는 없다.
그럼 body태그 뒤, html태그가 끝나는 그 사이에 <script> 태그를 추가해서
각각의 요소들에 대한 이벤트 설정을 해주자
<script>
// 변수 설정
let counter=0;
const button = document.getElementById("btn");
const abc = document.querySelector("span");
// 감지 시에 실행할 함수
function handleClick(){
counter=counter+1;
abc.innerText = 'Total clikcs : ' + counter;
}
// 이벤트 감지
button.addEventListener("click",handleClick);
</script>
우선 알고 가야 하는 것
let : 일반적인 변수 역할 ex) int a; 처럼 변수 내의 값이 변해도 된다.
const : 상수 개념. 한 번 할당되면 변하지 않는다.
Script에서 해줘야 하는 건 3단계다.
1) 변수 설정
2) 이벤트 감지
3) 감지 시에 실행할 함수 설정
1) 변수 설정
● 위에서 let counter =0;으로 설정하여 클릭하는 횟수에 맞게 값을 증가시킨다.
● button 이라는 상수에, body에서 btn이라는 ID를 가진 변수를 button에 할당한다.
● abc 라는 상수에, span 이라는 요소를 선택하여 담은 후에, 우리가 원하는 방식대로 데이터를 가공할 수 있다.
2) 이벤트 감지
button.addEventListenr("click" (여기에 이벤트 종류들 많음) , 실행시킬 함수 ) ;
> 버튼을 누르면 감지하고 어떤 작업을 하겠냐에 대한 부분
3) 함수 설정
counter 값을 1씩 증가시키고
abc(span을 담은 곳) 에 text를 어떻게 띄울지 표시.
클릭 하면 이렇게 됨
'혼자하기 > React' 카테고리의 다른 글
[ React ] 4. Props (0) | 2023.09.26 |
---|---|
[ React ] 3. 더 간단하게 만들기 (0) | 2023.09.26 |
[ React ] 2. React의 특징 (0) | 2023.09.22 |