코드 캠프 12일차) Prev State

prevState

state의 작동원리

const [count, setCount] = useState(0);

const onClickCounter = () => {
  
   setCount(count + 1); 
   setCount(count + 1);
   setCount(count + 1);
   setCount(count + 1);
}
onClickCounter를 실행시키면 count의 값은 1 이 된다.

왜 count의 값은 1이 될까?

리액트 컴포넌트는 state값이 바뀔 때 해당 컴포넌트를 리렌더링 시키는데 이 리렌더링은 비동기적으로 발생하고, 위와 같이 한 번에 다수의 같은 state값을 변경하게 되면 리액트에서 같은 상태의 반복적인 변경에 따른 중복적인 리렌더링으로 발생하는 성능 저하를 막기 위해 암묵적으로 같은 호출들을 모두 무시하고 마지막 호출만 실행시킨다.

그럼 반복적으로 같은 state를 변경하고 싶으면?

그럴 땐 state prev를 사용하면 된다. 정확히는 이전 값을 기반으로 변경을 할 때 보통 사용할 수 있다.

const [count, setCount] = useState(0);

const onClickCounter = () => {
  
  setCount((prev) => prev + 1); 
  setCount((prev) => prev + 1); 
  setCount((prev) => prev + 1); 
  setCount((prev) => prev + 1); 
  setCount((prev) => prev + 1); 
  

}
onClickCounter를 실행시키면 count의 값은 5 가 된다.

화살표 함수로 콜백 함수를 사용하게 되면 이 콜백 함수는 파라미터로 이전 값을 받아온다. 이전 값을 기반으로 1을 더하고 바로 반환한 값을 state에 저장시킨다.

---

리팩토링...!