React :: 버튼 클릭시 숫자 카운트 되기

새 프로젝트 폴더를 만들고 npm start를 해도 실행이 안되면 경로충돌이 일어난 경우일 수 있으므로

새로 다시 시작해보는게 좋다

 

 

 

리액트에서는 

<button onClick={increase}>클릭!</button>

onClick => c를 대문자로 표기한다, onClick 뒤에 {} 가 사용된다

 

 

 

App.js

import './App.css';

function App() {
    let counter = 0;
    const increase = () => {
        counter += 1;
        console.log('카운터 확인!', counter);
    };
    return (
        <div className="App">
            <div>{counter}</div>
            <button onClick={increase}>클릭!</button>
        </div>
    );
}

export default App;

 

 

UI는 변함 없으나, 확인용 콘솔창에는 클릭시 숫자가 올라감을 확인할 수 있다

UI에도 숫자가 바뀌는 것을 보여지도록 수정해야 한다!

 

리액트에서는 state가 변하면 UI가 변하게끔 되어 있다

위에서 숫자가 바뀌지 않는 이유는 counter가 일반 변수이기 때문이다

 

 

 

import { useState } from 'react';
import './App.css';

function App() {
    let counter = 0;
    const [counter2, setCounter2] = useState(0); //react hook
    const increase = () => {
        counter += 1;
        setCounter2(counter2 + 1);
        console.log('카운터 확인!', counter, '카운터2확인!!', counter2);
    };
    return (
        <div className="App">
            <div>{counter}</div>
            <div>state : {counter2}</div>
            <button onClick={increase}>클릭!</button>
        </div>
    );
}

export default App;

 

 

 

 

state를 바꾸면 UI를 렌더링 해준다

일반 변수는 리액트가 주시하고 있는 값이 아니기 때문에

리-렌더링이 되면 변수의 값이 초기화 된다 (내가 설정한 초기값으로) 그래서 계속 카운터는 1로 표시 된다