State 상태

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

State 생성

import React,{useState} from 'react'

State를 만들기 위해서 State가 필요한 컴포넌트 파일에 React를 import해야 한다.

State 선언

const [count, setCount] = useState(0);

useState메서드는 배열을 반환하고, count와 setCount를 반환한다.
count는 상태의 값으로 사용된다.
setCount는 count를 상태를 변화시키는 상태변화 함수로 사용된다.
useState(0)의 0은 초기값을 의미한다.

State를 이용한 함수 작성

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

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

html코드에 적용

const onDecrease2 = ()=>{
        setCount2(count2 -1);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick = {onIncrease}>+</button>
            <button onClick = {onDecrease}>-</button>

            <h2>{count2}</h2>
            <button onClick = {onIncrease2}>+</button>
            <button onClick = {onDecrease2}>-</button>
        </div>
    )
}

클릭 이벤트인 onClick을 사용하며, 증감, 감소의 함수를 이용하기 위해 { }안에 변수명을 넣어 클릭시 함수가 실행될 수 있도록 한다.

최종 예제

import React,{useState} from 'react'

const Counter = () =>{
    //0에서 출발
    //1씩 증가하고
    //1씩 감소하는
    //count 상태

    const [count, setCount] = useState(0);

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

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

    const [count2, setCount2] = useState(0);
    const onIncrease2 = ()=>{
        setCount2(count2 + 1);
    }

    const onDecrease2 = ()=>{
        setCount2(count2 -1);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick = {onIncrease}>+</button>
            <button onClick = {onDecrease}>-</button>

            <h2>{count2}</h2>
            <button onClick = {onIncrease2}>+</button>
            <button onClick = {onDecrease2}>-</button>
        </div>
    )
}

export default Counter;

컴퍼넌트는 자신이 가진 State가 변화하면 화면을 다시 그려 리랜더를 한다
즉, 함수가 다시 호출된다.
그래서 실시간으로 결과값을 받을 수 있게 된다.
하나의 컴포넌트에 여러개를 가질 수 있다.

State는 짧은 코드와 유연한 문법으로 화면에 나타나는 데이터를 쉽게 교체하고 업데이트를 도와준다.