React useState에서 상태 업데이트 깊게 이해하기

기본적인 상태 업데이트

React의 useState 훅을 사용할 때, 상태를 업데이트하는 방법은 크게 두 가지

1. 직접 값 할당

const [test, setTest] = useState(0);
setTest(test + 1);

2. 콜백 함수를 사용한 업데이트

const [test, setTest] = useState(0);
setTest((prev) => prev + 1);

콜백 함수 방식을 권장하는 이유

1. 안전한 상태 참조

• 직접 값 할당(setTest(test + 1))은 현재 렌더링 시점의 test 값을 참조
• 콜백 함수(setTest((prev) => prev + 1))는 항상 가장 최신의 상태 값을 안전하게 참조

2. 연속적인 상태 업데이트 보장

// 문제가 발생할 수 있는 코드
setTest(test + 1);
setTest(test + 1);
setTest(test + 1);
// 예상: 3 증가, 실제: 1 증가

// 안전한 코드
setTest((prev) => prev + 1);
setTest((prev) => prev + 1);
setTest((prev) => prev + 1);
// 예상 및 실제: 3 증가

3. 비동기 상황에서의 신뢰성

• 클로저나 비동기 콜백에서 상태를 업데이트할 때 콜백 함수 방식이 더 안전함
• updater function을 사용해 prevv state를 고려하면 예상치 못한 결과를 예방할 수 있음

사용 예시

function PrevState() {
  const { cardState, setCardState } = useCard({
    cardCompany: "",
    cardNumber: "",
    cardHolder: "",
    expiredDate: "",
  });

  const handleCardNumber = (cardNumber) => {
    setCardState((prevState) => ({
      ...prevState,
      cardNumber,
    }));

    if (cardNumber.length === 8) {
      setOpenCardPopup(true);
    }
  };

  const handleCardCompany = (cardCompany) => {
    setCardState((prevState) => ({
      ...prevState,
      ...cardCompany,
    }));

    setOpenCardPopup(false);
  };

  return (
    <div>
      <input
        type="number"
        value={cardState.cardNumber}
        onChange={(e) => handleCardNumber(e.target.value)}
      />
      <input
        type="text"
        value={cardState.cardCompany}
        onChange={(e) => handleCardCompany(e.target.value)}
      />
    </div>
  );
}