PrevState

이력서작성프로젝트를 진행하면서 작성input마다 점수를 증가시키는 기능을 만들어야했다.

그런데 final이라는 state안에 input의 빈값여부를 true와 false로 받아오면서 객체로 저장을 해야했다.

하지만 초기 state에 값이 저장되지 않는 현상이 발생하였다.

1. 문제점

setstate는 비동기이다.setState의 인자로 state를 사용하게 된다면 이전의 갱신된 값이 아닌, 이전의 갱신되기 전의 값이 들어가기 때문에 값이 누적되지가 않는 현상이 발생하게 된 것이었다.

이전의 코드

const handleScore = (title: string, item: string) => {
    setFinal(
				...final
        [title]: item === '' || item === undefined ? false : true),
     
    })

이 코드의 문제점은 이전 상태를 저장하지 않고 final의 값들만 복사를 하였기때문에 이전 값이 저장이 되지 않는 것이었다.

그래서 이전 상태가 저장되지 않고 값들을 복사만 하고 새로운 값으로 state가 갱신되는 것이었다.

2. 해결방법

문제를 해결한 코드

const handleScore = (title: string, item: string) => {
    setFinal((previousState) => {
      return {
        ...previousState,
        [title]: item === '' || item === undefined ? false : true,
      }
    })
  }

그래서 이전 값의 상태를 복사하기 위해 preState를 사용하였다.

prevstate를 알고는 있었지만, 모달창을 구현할 때나 이전 값을 더할때만 사용을 했었는데, 나는 스프레드 문법으로 final의 값을 복사하고 있다고 착각하여 발생한 문제점이었다.