State 대신 더 나은 방법 사용하기

const [enteredTitle,setEnteredTitle] = useState('');
const [enteredAmount,setEnteredAmount] = useState('');
const [enteredDate,setEnteredDate] = useState('');

위 세 state는 모두 같은 개념입니다.
이 세번의 state대신 한번에 state로 사용하는 방법도 있습니다.

useState({})

useState를 호출해서 객체를 값으로 전달하면 됩니다.
그러나 한 객체로 선언 했으므로, state를 업데이트 할 때마다 한 개가 아닌
세 프로퍼티 모두를 업데이트 해야합니다.
state를 업데이트 할 때 react는 이전 state와 병합하지 않습니다.

const [userInput,setUserInput]=useState({
        enteredTitle:'',
        enteredAmount:'',
        enteredDate:'',
    })

    const titleChangeHandler =(event)=>{
        //setEnteredTitle(event.target.value);
        setUserInput({
            enteredTitle:event.target.value,
            // ??
        })
    }

예를들어 위와 같은 코드는 enteredTitle의 상태만 변경할 뿐 Amount와 Date의 상태는 이전 상태로 유지되는 것이 아니게됩니다.

위와 같은 문제점은 spread연산자로 해결할 수 있습니다.

const titleChangeHandler =(event)=>{
        //setEnteredTitle(event.target.value);
        setUserInput({
            ...userInput,
            enteredTitle:event.target.value,
        })
    }

userInput 전체를 복사하고 enteredTitle를 오버라이딩 합니다.

const titleChangeHandler =(event)=>{
        //setEnteredTitle(event.target.value);
        setUserInput({
            ...userInput,
            enteredTitle:event.target.value,
        })
    }
    const amountChangeHandler =(e)=>{
        //setEnteredAmount(e.target.value);
        setUserInput({
            ...userInput,
            enteredAmount:e.target.value,
        })
    }
    const dateChangeHandler = (e)=>{
        //setEnteredDate(e.target.value);
        setUserInput({
            ...userInput,
            enteredDate:e.target.value,
        })
    }

남은 코드도 각각 변경해줍니다.