setState 의 인자로 콜백함수 전달하기

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div className='counter'>
      <span className='number'>{count}</span>
      <button
        className='button'
        onClick={() => {
          setCount(count + 1);
          setCount(count + 1);
          setCount(count + 1);
        }}
      > 
        Add +
      </button>
    </div>
  );
}

• 버튼 클릭 시 1이 출력됨
• onClick 이 호출되었을 때 전달되는 콜백 함수는 현재 상태를 기억함
• 내부에서 사용하는 count 변수의 현재 값은 0이므로 이 값을 계속 기억하게 됨 (자바스크립트 클로저)

 

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

type SetStateAction<S> = S | ((prevState: S) => S);

• useState 의 업데이트 함수는 값 또는 콜백함수를 전달받을 수 있음
• 콜백함수의 인자로 이전의 상태 값을 전달받을 수 있음

 

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div className='counter'>
      <span className='number'>{count}</span>
      <button
        className='button'
        onClick={() => {
          setCount((prev) => prev + 1);
          setCount((prev) => prev + 1);
          setCount((prev) => prev + 1);
        }}
      > 
        Add +
      </button>
    </div>
  );
}

• 버튼 클릭 시 3이 출력됨
• 콜백 함수의 인자로 이전의 상태 값을 전달받아 누적이 가능
• 이전의 상태 값을 여러번 업데이트 하는 경우 외부의 값에 의존하지 않아도 됨