오래 못 할 짓 하지 않기

[ React ] 1. 리액트 기초 ( JS version ) 본문

혼자하기/React

[ React ] 1. 리액트 기초 ( JS version )

쫑알bot 2023. 9. 22. 17:11
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