React 기본 - 7.useState(click event)

useState
컴포넌트에서 동적인 값을 상태(state)라고 부르며, 리액트에 useState라는 함수를 사용해 컴포넌트에서 상태를 관리할 수 있습니다.

Counter.js

// 리액트 패키지에서 useState 함수 불러오기 
import React, {useState} from 'react';

function Counter() {
	// 배열 비구조화 할당을 통해 각 원소를 추출
	// 새로운 sate 변수를 선언하고, number라 부름
	// 함수를 호출하면 배열이 반환되며, 첫번째 원소는 값, 두번째 원소는 setNumber라는 이름의 함수
    const [number, setNumber] = useState(0);

    const onIncrease = () => {
    // + 값 설정
        setNumber(number + 1)
    }
    const onDecrease = () => {
	// - 값 설정
        setNumber(number - 1)
    }
    return(
        <React.Fragment>
        // {number}값 보여주기 
            <h1>{number}</h1>
            <button onClick={onIncrease} type="button">+1</button>
            <button onClick={onDecrease} type="button">-1</button>
        </React.Fragment>
    )
}
export default Counter;