state prev

State가 뭐야?

리액트 컴포넌트에서 데이터를 담기 위한 상자이다.
setState 함수는 state의 객체에 대한 업데이트를 실행하는 함수다. state라는 상자에 담긴 내용들은 state의 내용을 바꾸는 setState함수가 끝나면 변동사항이 반영된다.

setState는 불필요한 렌더링을 방지하기 위해 설계된 기능이다. 따라서 즉시 함수를 수행하지 않는다. 이런 작동방식을 비동기적 작동이라고 한다.

아래는 버튼을 클릭할 때마다 count의 갯수를 하나씩 증가, 감소시키는 코드다.

import{ useState} from 'react'

export default function CounterStatePage(){  
    const [count, setCount] = useState(0)
    function counterUp(){
        setCount(count+1)
    }
    return(
        <>
            <div>{count}</div>
            <button onClick={counterUp}>카운트 올리기!</button>     
        </>
    )
}

여기서 버튼을 클릭할 때마다 count를 5씩 증가시키려면
setCount(count +1) 를 5번씩 연달아 적으면 될 것이다. 근데 여전히 1씩만 증가한다.

이럴 떄는 prev를 사용해야한다.

prev 임시저장공간

import { useState } from "react";

export default function CounterStatePage() {
  const [count, setCount] = useState(0);

  function counterUp() {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
	setCount((prev) => prev + 1);
    
    // setCount(count+1)
    // setCount(count+1)//두번째 플러스 1 카운트는 먹히지 않는다. 계속 카운트가 1일뿐
    // setCount(count+1)
    // setCount(count+1)
   	// setCount(count+1)
    
    // setCount(1)
    // setCount(10)//카운트 10으로 바꿔줘
    // setCount(50)//카운트 50으로 바꿔줘, 위에 1,10은 무시됨.삭제됨
  }

  return (
    <>
      <div>{count}</div>
      <button onClick={counterUp}>카운트 올리기!!!</button>
    </>
  );
}

prev는 연속되는 setCount(count+1) 이 녀석을 순차대로 값을 받아 아래로 넘겨주는 역할을 한다. prev에 1이 더해지고 그 다음 prev는 1이 더해진 값에 또 1을 더해서 아래의 prev로 내려준다. 그렇게 5까지 더해진 값을 담은 prev는 최종적으로 setCount 담기고 그 값이 counterUP에 담겨서 최종적으로 한 번 클릭할 때 5씩 값이 오르게 한다.