React :: useState

💡 State

state는 말 그대로 상태를 말하는 데 함수형 컴포넌트에서 state의 값을 변경할 때 Hook을 사용하여 변경하곤 한다.

state가 var, let로 선언한 변수들과 다른 점이 뭘까?

리액트에서 state를 쓰는 가장 큰 이유는
리액트는 state가 변경될 때 그 state가 포함된 HTML을 자동으로 재렌더링 하기 때문이다.

var, let로 선언한 변수들도 메서드를 통해 값을 변경할 수 있는데 이는 HTML을 새로고침 해야 변경이 된다.

하지만 이와 달리 state를 사용하면 변경될 때마다 가상의 DOM을 자동으로 재렌더링하기 때문에 빠르고, 부드럽게 화면전환이 된다.

💡 useState

useState는 앞서 설명한 state를 state의 상태 변경 함수를 통해 상태를 변경하고 이를 화면에 반영해준다.

📝 import

useState는 리액트가 제공해주는 일종의 내장함수로 상단에 import를 해줘야 한다.

import { useState } from 'react';

📝 예시

function App() {
  const _count = useState(0);  // 0으로 초기화
  console.log(_count);         // (2) [0, f]
  
  const count = _count[0];     // 상태의 값
  const setCount = _count[1];  // 상태의 값을 변경할 때 쓰는 함수 = 상태 변경 함수
  console.log(count);          // 0

  const [count, setCount] = useState(0); // 위의 코드 세 줄 축약 

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

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