아래 상태의 정의와 같이 모든 사물과 현상에는 상태가 있습니다.

한 예시로 전구는 켜진상태와 꺼진상태가 있습니다.

이 두 상태는 사용자에 의해 상호 전환될 수 있습니다. 켜진 상태 ↔ 꺼진 상태

이를 리액트에서 적용해본다면 다음과 같습니다.

isLightOn(state) = 현재 전구의 점등 상태

전구의 상태처럼 리액트에서는 State를 사용합니다.
리액트에서 제공하는 내장 함수인 useState를 아래 코드와 같이 사용합니다.

import { useState } from "react";

function App() {
  const isLightOn = useState("on");
  console.log(isLightOn);
  return <></>;
}

state를 출력해보면 아래와 같이 0번째 index의 값이 off로 출력됩니다.
현재 전구는 꺼진 상태입니다.

위의 출력한 isLightOn의 useState는 두 개의 요소를 가진 배열을 반환합니다.

첫 번째 요소는 새롭게 생성된 state값입니다.

초기값을 useState("off")에 off를 인자로 설정했습니다.

이번에는 on을 인자로 전달했습니다.

function App() {
  const isLightOn = useState("on");
  console.log(isLightOn);
  return <></>;
}

아래와 같이 state의 값이 on이 되어 전구가 켜진 것을 확인할 수 있습니다.

따라서,

useState를 생성할 때 초기값을 인자로 설정할 수 있습니다.

두 번째 요소는 상태를 변화 시키는 함수입니다.

또, 변수에 저장하는 것 보다는 비 구조화 할당 문법을 사용하여 값을 저장하는 것이 일반적인 사용법입니다.

숫자 증가 버튼 예시

클릭할 때 마다, 숫자 1이 증가하는 예시입니다.

function App() {
  const [state, setState] = useState(0);
  <>
    <h1>{state}</h1>
    <button
      onClick={() => {
        setState(state + 1);
      }}
    >
      +
    </button>
  </>;
}

클릭 이벤트 리스너에 의해 클릭할 때 마다,
현재 state 값에 +1을 더해주기 때문에 state값은 증가하게 됩니다.

컴포넌트내에 새로운 스테이트를 생성하고
해당 스테이트의 값을 버튼을 클릭해서 변경하게 되면
리액트가 내부적으로 컴포넌트의 스테이트가 변경됨을 감지해서
해당 컴포넌트를 다시 렌더링해줍니다.

컴포넌트의 State값이 바뀌면,
변경된 State값이 반영된 화면을 다시 return한다.

# 전구 버튼으로 보는 예시

function App() {
  const [light, setLight] = useState("OFF");

  <>
    <div>
      <h1>{light}</h1>
      <button
        onClick={() => {
          setLight(light === "ON" ? "OFF" : "ON");
        }}
      >
        {light === "ON" ? "끄기" : "켜기"}
      </button>
    </div>
  </>;
}

전구가 켜져 있을 때는, 끄기버튼이,
전구가 꺼져 있을 때는, 켜기버튼이 활성화되는 코드입니다.

const [light, setLight]를 선언하고
useState("OFF"); 초기 값을 OFF로 설정했습니다.

켜기 버튼을 클릭하면,
현재 setLight값은 OFF이기 때문에 ON을 설정합니다.
(setLight(light === "ON" ? "OFF" : "ON");)

State 사용 이유

자바 스크립트 변수로 사용하면 되지 않을까라는
의문점이 생길 수 있습니다.

이 궁금증을 확인하기 위해 자바스크립트를 사용해서
State를 사용해서 적용한 버튼을 아래와 같이
자바스크립트 소스코드로 변경합니다.

function App() {
  //const [light, setLight] = useState("OFF");
  let light = "OFF";
  <>
    <div>
      <h1>{light}</h1>
      <button
        onClick={() => {
          //setLight(light === "ON" ? "OFF" : "ON");
          light === light === "ON" ? "OFF" : "ON";
        }}
      >
        {light === "ON" ? "끄기" : "켜기"}
      </button>
    </div>
  </>;
}

이렇게 소스 코드를 작성하면,
코드 상에서 light 변수의 값은 ON ↔ OFF은 바뀌어도
화면에는 아무런 변화가 생기지 않습니다.

반면,
State의 값에 변화가 생기면 화면은 리-렌더링합니다.

아무리 많은 변수의 변화가 일어나도 화면에 렌더링되지 않는다면 사용자에게는 보이지 않습니다.

보여지는 화면에 값이 변경될 때 마다 렌더링 하는
State를 사용하는 것이 매우 유용합니다.