State (상태)

State(상태)란?

React에서 말하는 state(상태)는 컴포넌트가 가지는 테마처럼 계속 값이 바뀔 동적인 데이터이고, 이 상태 관리는 이것을 가진 컴포넌트가 직접 하게 된다.

컴포넌트가 실시간으로 값을 바꿀 수 있는 이유는 re-render 되기 때문이다.
📌 리액트의 컴포넌트가 re-render 되는 경우
1) 자신이 가진 state(상태)가 변화하면 그 컴포넌트가 re-render를 한다.
2) 자신에게 내려오는 props가 바뀔 때마다 re-render 한다.
3) 부모 컴포넌트가 re-render 되면 자신도 re-render 한다.

useState 메서드

먼저 state는 react의 기능이기 때문에 react를 import 해야한다.
그리고 state를 사용하기 위해 useState 메서드도 포함해야한다.

import React, {useState} from 'react';

const Counter = () => {

      // 변수    상태변화 함수     초기값
  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;

📌 useState 문법

const [count, setCount] = useState(0);
//     상태값  상태변화함수           초기값

useState 리액트 메서드는 배열을 반환하고 배열의 비구조화할당을 통해서
0번째 index로 count, 1번째 index로 setCount 라는 상수로 받아온다.
0번째 index인 count는 상태의 값으로 return 되어 화면에 표시되고,
1번째 index인 setCount는 count라는 상태를 변화시키는 상태변화 함수로 사용한다.
그리고 useState(0) 메서드를 호출하면서 넘겨주는 인자 0은 count라는 상태를 만드는데 초기값으로 사용된다.

useState를 사용한 상태 변화 만들기

const Counter = () => {

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

위와 같이 상태변화 함수인 setCount를 사용하여 onClick 이벤트로 상태를 변화시킬 수 있다.