[React] React State

React에서는  상태(State) 변화를 확인할 수 있다. 

먼저

import React,{useState} from 'react';

를 선언하여 사용 한다.

 

콘솔을 확인하면 리엑트는 버튼 클릭이벤트로 2번의 counter을 호출하는 것 을 확인할 수 있다. 

한 번은 연산을 수행하며 한번은 화면 렌더링을 수행한다.

import React,{useState} from 'react';

const Counter = () =>{

    console.log("counter 호출!");
    const [count, setCount, ads] = useState(0);

    const onIcrease = ()=>{
        setCount(count + 1);
    }

    const onDecrease = () =>{
        setCount(count -1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIcrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
        );
    }

export default Counter;