useState의 이전 상태값

useState를 사용할 때 이전 상태값을 기반으로 다음 상태값을 계산하기 위해 의존성 배열에 추가 하는 경우가 있다.

 

function TestComponent() {
  const [number, setNumber] = useState(0)
  useEffect(() => {
    function onClick() {
      setNumber(number + 1)
    }
  }, [number]) // 의존성 배열
}

 

의존성 배열을 없애기 위해 상태값 변경 함수에 함수를 입력하면 이전 상태값을 매개변수로 받을 수 있다.

 

function TestComponent() {
  const [number, setNumber] = useState(0)
  useEffect(() => {
    function onClick() {
      setNumber(prev => prev + 1) // 상태값 변경 함수에 함수 전달
    }
  })
}