React Hook - useState

어떻게 보면 React를 그냥 따라 쓰고 예제만 할 뿐 공부가 많이 부족했던거 같다.

 

그래서 찬찬히 공부

 

https://react.dev/reference/react/useState

useState – React

useState는 state 상태를 저장하며 변경 감지 및 UI 업데이트를 하는 역할을 한다.

가령 state가 아닌 변수가 업데이트가 일어난다고 해서 바로 업데이트 되어 화면에 해당 값이 반영되지는 않는다.

 

useState는 다음 아래와 같이 [변수, 세팅할변수] = useState(초기값); 을 통해 사용을 한다.

 

import "./styles.css";
import { useState } from "react";

export default function App() {
  let cnt2 = 0;

  const [cnt, setCnt] = useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onClick={() => {
          setCnt(cnt + 1);
        }}
      >
        {cnt}
      </button>
      <button
        onClick={() => {
          console.log(cnt2, "cnt2");
          cnt2++;
        }}
      >
        {cnt2}
      </button>
    </div>
  );
}

 

가령 cnt는 state로 관리하는 값이고 버튼을 누를 때마다 update가 되어 숫자가 증가하지만,

cnt2는 누른다고해서 화면이 업데이트 되지는 않는다.

엌ㅋ 안보임 ㅋㅋㅋ

 

 

또한, setCnt는 함수를 전달 할 수 있으며, prevCnt는 전에 cnt 값을 인자로 받아서 넘겨준다. 그래서 결국 새로운 상태값을 계산한 뒤 반환 하게 된다.

setCnt(prevCnt => prevCnt + 1);

 

단순히 +1 씩 증가하게 되는 형태