리액트 상태(state) 업데이트 예약

리액트는 상태 업데이트를 즉시 하지 않고 예약을 한다.
따라서 하나의 상태관리 함수가 여러 상태를 관리하게 된다면
문제가 발생할 수 있다.

import { useState } from "react";
const ExpenseForm = () => {
  //이벤트 타겟 값 항상 string으로 읽으니까 초기값 다 ""으로 하자구
  //🔥객체로 묶어 관리하는 방법
  const [userInput, setUserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: "",
  });
  
  const titleChangeHandler_1 = (e) => {
    setUserInput({ enteredTitle: e.target.value });
    console.log("Title changed!");
  };
  
  const titleChangeHandler_2 = (e) => { 
    setUserInput({ ...userInput, enteredTitle: e.target.value });
    console.log("Title changed!");
  };
  
  
  // 아래와 같은 방법은 리엑트가 내부 함수에서 제공하는 상태 스냅샷이 항상 
  // 최산 상태가 되도록 보장해준다.(예약된 모든 상태 업데이트를 고려)
  const titleChangeHandler_3 = (e) => { 
    setUserInput((prevState) => {
      return { ...prevState, enteredTitle: e.target.value };
    });
    console.log("Title changed!");
  };
}