React.js 상태(State)

상태라는 것으로 React를 설명할 수 있다고 해도 과언이 아니다.

State란?

배고픔에 대한 상태가 적당함, 배고픔, 배부름을 인간의 허기 상태의 종류다. 이와같이 상태란 계속해서 변화하는 특정 상태며, 상태에 따라 다른 행동을 하게된다.

React에 빗대어 설명하자면, 어떤 컴포넌트가 '상태'를 관리하게 된다. 

State 사용 실습

// Counter.js 코드
import React, {useState} from 'react';

const Counter = () => {

    //0에서 출발, 1씩 증가, 1씩 감소하는 Counter 상태

    const [count, setCount] = useState(0);
    //setCount는 count상태를 변화시키는 역할, 0은 초기값
    console.log("counter 호출")

    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;

컴포넌트의 상태가 변화하면 화면을 다시 그리기 위해 함수가 재호출된다. counter 호출이 출력되는 것을 보면 알 수 있다.