React.js 기초 - State

한입크기로 잘라먹는  리액트 강의 

 

state(상태)란?

• 계속해서 변화하는 특정 상태
• 상태에 따라 각각 다른 동작을 함

 

counter 예제

import React,{useState} from "react";

const Counter = () => {

    //0에서 출발
    //1씩 증가
    //1씩 감소
    //count 상태
    const [count, setCount] = useState(0);
    //count는 상태의 값
    //setCount는 count라는 상태를 변화시키는 상태변환 함수
    //useState(0)은 count의 값을 0으로 초기화

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

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

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

export default Counter;