61. 양방향 바인딩 추가

이제 form 태그 제출을 눌렀을 때 input 내부를 비우고 싶다

state를 사용하면 양방향 바인딩을 사용할 수 있다는 장점이 있다

 

간단히 말해 변경되는 입력 값만 수신하는 것이 아니라, 입력에 새로운 값을 다시 전달할 수도 있다.

그래서 프로그램에 따라 입력 값을 초기화하거나 변경할 수 있다
간단하게 기본 속성인 value를 입력 요소에 추가하기만 하면 된다.

궁금한 점은 이 양방향 데이터가 setState() 의 개념이라고 보면 될까? 
즉 화면이 업데이트 된다는 점에서 setEnteredTitle('')이라고 작성한 거고 입력되어 있는 창을 비우기 위해서 value로 바인딩을 해주는 것인가.. 이해한 게 맞는 지 모르겠다.

그냥 stateEnteredTitleㅎ면 title의 값만 바뀐 거고 그 값을 input 데이터에 빈 값으로 넣어주기 위해서 value 로 양방향 바인딩을 한 것 같다

 

한 가지 문제가 발생했다 

초기값이 설정되어 있지 않다는 것 같았는데 
새로고침하니 안 뜬다 ; 업데이트 안 된 오류였지 싶다

 

import React, { useState } from "react";
import "./ExpenseForm.css";
const ExpenseForm = () => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredAmount, setEnteredAmount] = useState("");
  const [enteredDate, setEnteredDate] = useState("");
  // const [userInput, setUserInput] = useState({
  //   eneteredTitle: '',
  //   eneteredAmount: '',
  //   eneteredDate: '',
  // })
  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
    // setUserInput({
    //   ...userInput,
    //   enteredTitle: event.target.value
    // })

    // setUserInput((prevState) => {
    //   return {
    //     ...prevState,
    //     enteredTitle: event.target.value
    //   }
    // })
  }

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

  const submitHandler = (event) => {
    event.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    }
    console.log(expenseData);

    setEnteredAmount('');
    setEnteredTitle('');
    setEnteredDate('');
  }

  return <form onSubmit={submitHandler}>
    <div className="new-expense__controls">
      <div className="new-expense__control">
        <label htmlFor="">Title</label>
        <input type="text" value={enteredTitle} onChange={titleChangeHandler} />
      </div>
      <div className="new-expense__control">
        <label htmlFor="">Amount</label>
        <input type="number" min="0.01" step="0.01" value={enteredAmount} onChange={amountChangeHandler} />
      </div>
      <div className="new-expense__control">
        <label htmlFor="">Date</label>
        <input type="date" min="2021-01-01" max="2023-12-31" value={enteredDate} onChange={dateChangeHandler} />
      </div>
      <div className="new-expense__actions">
        <button type="submit">Add Expense</button>
      </div>
    </div>
  </form>
}

export default ExpenseForm;