setState 중복 사용 시 주의사항

---

프론트엔드 개발관련 공부내용을 기록하는 포스트 입니다.

---

1. 상태 변경 시 기억할 사항

---

기본적으로 setState를 사용할때 아래와 같이 작성을 한다.

this.setState({
  value : "";
  value2 : "";
})

만약 클릭 시 값이 1씩 증가하는 컴포넌트 기능을 가진 개발이 필요하다고 하자.

this.setState({
  value: this.state.value + 1
  ...
})

...

this.setState({
  value: this.state.value + 1
  ...
})

상태 값을 변경하면 value 값은 몇일까?

우리가 예상하는 답은 불린 수대로 + 1 이 된 값이어야 한다.

하지만 React 의 State 관리는 비동기로 처리되기 때문에 정확히 연산이 되지 않는다. 이부분은 자세히 좀 더 봐야겠지만 만약 이럴경우 아래와 같이 코드를 작성해주자

이전의 State 값을 활용해야 하는 경우에는 아래와 같이 작성해주자.

this.setState((prevValue) => {
  return {
    value: prevValue.value + 1,
  };
});