[React] State의 이해

나는 처음 리액트를 배울 때 class component로 배웠다. 그래서 아직도 class component가 조금 더 익숙하긴 한데, 열심히 React Hooks와 친해지는 중이다.

처음 배울 때 잘 이해가 안 되기도 하고 자신 없기도 했던 게 상태 관리였다. 각종 키워드로 검색하면 this.setState는 잘 안 나오고 useState가 나오면 괜히 멀리하고 안 읽었던 것 같다. 이제는 익숙해져서 괜찮은데 초반에 가졌던 Hooks에 대한 두려움 때문에 먼 길을 돌아온 느낌.

Task

this.state = {completionStatus: false}

1. firebase에서 user data를 불러와서 completionStatus가 true인지 false인지 확인
2. 학습 완료 / 학습 완료 취소 버튼을 누르면 completionStatus를 변경

Issue

비동기에 대한 이해 부족... completionStatus를 setState로 변경해도 바로 반영되지 않았음.

Solution

getUserCompletionStatus(uid).then(tsCompletionStatus =>
  this.setState(prevState => {
    return { ...prevState, tsCompletionStatus };
  })
);

위 코드처럼 object나 array를 setState 할 때는 functional setState를 한다!

Another Example

const updateQueue = [
  (state) => ({ score: state.score + 1 }),
  (state) => ({ score: state.score + 1 }),
  (state) => ({ score: state.score + 1 }),
];

리액트 처음 배울 때 누구나 해보는 counter 예시도 추가한다.