(23.01.20)React 프레임워크 : 버튼 이벤트리스너 만들기

버트을 누르면 동적으로 숫자가 올라가는 이벤트 만들기

 

 

터미널을 통해서 react-router-dom 설치하기

 

 

App.js

import { useState } from 'react';
import { Route, Routes, Link } from 'react-router-dom';
import './App.css';
import Hello from './comp/Hello.js';
import Test from './comp/Test';
 
function App() {
  //상태 변수
  const [num, setNum] = useState(0);
  //let num =0;
  //var와 let의 차이점 : let은 해당{}안에서 밖에 못쓴다.
  //var는 한개의 함수 영역에서 통한다. 함수안에 for,if {}안에서도 쓸 수있다.
  const Increase = ()=>{
    //화살표 함수  > 리액트에서 람다표현식이다.
    //num = num +1;
    setNum(num+1);
    //document.getElementById("div1").innerText = num;
  }
  //상수를 만드는 변수 
  return (
    <div className="App">
      <div id="div1">현재 값 : {num}</div>
        <button onClick={Increase}>확인</button>
    </div>
  );
}
 
export default App;

 

var	let	const
한 개의 함수 내 어디에서든 선언 & 사용	한 개의 block 내에서 선언 & 사용	한 번 값을 대입한 후 다시 새로운 값을 대입할 수 없다.
함수 내 아무리 깊은 곳에서 선언했어도! React에서는 var를 별로 쓰지 않음		java의 final과 같은 느낌이다.

 

 

실행결과 :