[TIL-0510] useState 상태 업데이트: 함수형 업데이트 vs. 직접 참조하여 업데이트

🌟 useState로 상태 정의

const [isClickedPreference, setIsClickedPreference] = useState<boolean>(false);

"선호" 버튼을 클릭했는지 여부를 판단하기 위해, 다음과 같이 boolean 타입으로 상태를 정의하였다.

---

🌟 isClickedPreference 상태 업데이트

setIsClickedPreference 상태 업데이트 함수를 이용하여 isClickedPreference 상태를 업데이트하는 방법은 크게 두 가지가 있다.

1. 함수형 업데이트 방식

   setIsClickedPreference((prev) => !prev);

   • 이 방식은 이전 상태(prev)를 React가 보장하는 최신 값으로 받아서, 그 값을 기반으로 새로운 상태를 계산함
   • 비동기적인 업데이트에서도 안정적으로 동작함
   • 여러 상태 업데이트가 연달아 일어날 때에도 정확한 상태 반전을 보장함

2. 현재 상태값을 직접 참조해서 업데이트하는 방식

   setIsClickedPreference(!isClickedPreference);

   • 코드 실행 시점의 isClickedPreference 값을 기반으로 새로운 상태를 정함
   • 하지만 이 값은 React가 최신 상태로 업데이트하기 전일 수 있으므로, 연속된 상태 업데이트에서 예상과 다른 결과가 나올 수 있음
   • 특히 이벤트 핸들러나 useEffect 안에서 상태 변경이 여러 번 일어나는 경우에는 주의가 필요함

---

🌟 예시로 차이 보기

1. 함수형 업데이트 방식

   // 이 버튼을 두 번 빠르게 클릭하면?
   <button onClick={() => {
      setIsClickedPreference((prev) => !prev);
      setIsClickedPreference((prev) => !prev);
    }}>

   • 첫 번째로 false → true
   • 두 번째로 true → false
   • 예상대로 두 번 토글됨

2. 현재 상태값을 직접 참조해서 업데이트하는 방식

   <button onClick={() => {
      setIsClickedPreference(!isClickedPreference);
      setIsClickedPreference(!isClickedPreference);
    }}>

   • !isClickedPreference는 두 번 모두 같은 값으로 평가됨
   • 상태가 안 바뀌는 문제 발생

---

🌟 결론

• 항상 이전 상태를 기준으로 업데이트할 필요가 있는 경우에는 setState((prev) => ...) 방식이 더 안전함
• 단순 클릭 한 번으로만 상태를 바꾼다면 !isClickedPreference도 가능하지만, 예측 가능한 코드를 원한다면 함수형 업데이트를 추천함