[React] 입문 / State (상태)

State 개요

State 는 Component UI 의 데이터가 다양한 상황이나 이벤트에 따라서 변경이되면, Component UI가 자동으로 갱신되도록 동적 데이터를 관리하는 Object 이다.

Component 가진 State 가 바뀌면 해당 Component 가 rerender 되고, 이러한 특징은 React Component 가 가지는 특성 중 하나이다.

State 예제

import React, {useState} from 'react';

const Counter = () => {

    const [count, setCount] = useState(0);	// useState 사용 , 매개변수 : 초기값

    const onIncrease = () => {
        setCount(count + 1);	//setCount 를 통해 state를 변경해야 re rendering 된다.
    }

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

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

export default Counter;