state prev

state

• state 는 리액트 컴포넌트에서 데이터를 담기 위한 객체이다.
• setState 함수는 state 객체에 대한 업데이트를 실행한다.

export default function statePage() {
  const [state, setState] = useState(0); // state의 초기값을 0으로 지정

  function count() { 					// 버튼이 눌릴 때 마다 state 에 1을 더한다.
    setState(state + 1);
  }

  return (
    <>
      <div>결과는: {state}</div>
      <button onClick={count}>실행!</button>
    </>
  );
}

이처럼 스테이트를 사용할 수 있다.
만약 버튼이 눌릴 때 state + 1 을 여러번 반복하고 싶다면 어떻게 해야할까?

export default function PrevstatePage() {
  const [state, setState] = useState(0);

  function sumAll() {
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
    setState(state + 1);
  }

  return (
    <>
      <div>결과는: {state}</div>
      <button onClick={sumAll}>실행!</button>
    </>
  );
}

이렇게 4번을 써주면 버튼이 눌릴 때 마다 state 가 4씩 커질거라고 생각했다.
하지만 state 는 여전히 1씩만 증가한다. 그럼 어떻게 해야할까?

export default function PrevstatePage() {
  const [state, setState] = useState(0);

  function sumAll() {
    setState( (prev) => prev + 1 );
    setState( (prev) => prev + 1 );
    setState( (prev) => prev + 1 );
    setState( (prev) => prev + 1 );
  }

  return (
    <>
      <div>결과는: {state}</div>
      <button onClick={sumAll}>실행!</button>
    </>
  );
}

prev 라는 임시공간을 사용해주면 된다.