React - useState

상태 유지 값과 그 값을 갱신하는 함수를 반환한다.

사용방법

const [state, seState] = useState(initialState);

state를 통해 값을 확인하며, setState를 통해 값을 변경한다.

useState의 인자로는 초기값을 지정한다.
즉 첫 렌더링시 state 값은 initialState가 되며, setState로 값이 변경되면 리렌더링을 한다.

사용 예시

클릭할 때마다 값을 추가하고 빼는 counter

import { useState } from "react";

//count state의 초기값
const initialCount = 0;

export default function App() {
  const [count, setCount] = useState(initialCount);
  const handleAdd = () => {
    // 클릭할 때마다 이전 값에서 +1을 한다.
    setCount((prev) => prev + 1);
  };
  const handleMinus = () => {
    // 클릭할 때마다 이전 값에서 -1을 한다.
    setCount((prev) => prev - 1);
  };
  return (
    <div>
      <button onClick={handleAdd}>+</button>
      <span> {count} </span>
      <button onClick={handleMinus}>-</button>
    </div>
  );
}