온라인 강의/React 완벽 가이드 [Udemy]

59. 이전 State에 의존하는 State 업데이트

유호야 2023. 6. 2. 18:37
반응형
    setUserInput({
      ...userInput,
      enteredTitle: event.target.value
    })


위와 같은 방법으로 상태를 업데이트하도록 코드를 작성했는데 

이 방법도 틀린 것은 아니지만 

동시에 수많은 상태 업데이트를 계획하고 있다면 
오래되었거나 잘못된 스냅샷에 의존할 수도 있다.

이전 강의에서 말했듯이 setState가 값을 바로바로 변경하는 것이 아니라
업데이트 계획을 세우기 때문에 값 변경에 시간 차이가 발생할 수 있다.

그래서 아래와 같이 prevState를 이용해서 값을 적용해야 한다. 

    setUserInput((prevState) => {
      return {
        ...prevState,
        enteredTitle: event.target.value
      }
    })

 

즉 항상 최신 상태의 스냅샷에서 작업하도록 하는 더 안전한 방법이다
setState가 이전 state에 의존하고 있다면 반드시 이와 같은 형태로 함수를 작성해야 한다.

 

 

반응형