State (상태)

State(상태)란?

인간은 배고픔 - 배부름 - 적당함 상태가 지속적으로 바뀐다. 이를 인간의 허기 상태의 변화라고 해보자. 이 상태의 값은 배고픔 - 배부름 - 적당함이라고 생각하면 된다. 상태란 계속해서 변화하는 특정 상태고 상태에 따라 각각 다른 동작을 한다. 인간이 아닌 리액트 앱에 빗대어서 생각하면 더욱 이해하기 쉬울 것이다.

컴포넌트가 상태라는 테마를 갖고 스위치 같은 요소로 dark와 light로 변경시킬 수 있다. 값이 계속 바꾸는 데이터라고 상태로 생각하면 되겠다!

그러면 컴포넌트를 만들고 이것의 count를 보여주는 버튼을 만들어보겠다.

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);
    }

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

export default Counter;

import './App.css';
import Counter from "./Counter";

function App() {
  return (
    <div className="App">
      <Counter/>
    </div>
  );
}

export default App;

이 count state가 바뀔때마다 렌더링되고 이를 re-render라고 한다. 함수가 다시 호출된다고 생각하면 될 것 같다.