# 60 [udemy React 완벽 가이드 노트] 양방향 바인딩 추가(useState를 통한 input태그 입력값 비워주기)

 

사용자 입력값 객체로 만들기

---

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

 

input 태그의 속성에 onChange속성을 넣어주고

input에 입력값이 바뀔때마다 특정 함수들이 실행되게 한다. 

 

const ExpenseForm = props => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredAmount, setEnteredAmount] = useState("");
  const [enteredDate, setEnteredDate] = useState("");

  const titleChangeHandler = e => {
    setEnteredTitle(e.target.value);
  };
  const amountChangeHandler = e => {
    setEnteredAmount(e.target.value);
  };
  const dateChangeHandler = e => {
    setEnteredDate(e.target.value);
  };

 

 

여기서 form 태그의 자식 요소인 button 태그의 type을 submit으로 바꾸고

form 태그에 onSubmit 속성을 넣어주면 

버튼을 누를 때마다 form 태그의 onSubmit에서 가리킨 submitHandler 함수가 실행된다.

 

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

 

 

useState를 통해 입력된 input 창안의 값 비워주기

---

submitHandler는 

expenseData에 사용자에게서 받아온 enteredTitle을 title 키로 넣어주고

amount키에 enteredAmount값을 넣어주고, 

date키에 enteredDate값을 넣어주는 객체를 만들어주게 된다. 

또한 이것이 실행되면

각 input태그에 입력된 값이

useState가 실행되면서 빈 값으로 바뀌게 된다.

 

setEnteredAmount("");
setEnteredTitle("");
setEnteredDate("");

 

그 이유는 input태그에 value={enteredAmount}등의 속성을 넣어주었기 때문이다.

즉, submitHandler가 실행되면서

setEnteredAmount("");

부분이 실행되어 enteredAmount값이 setEnteredAmount함수가 실행되어 빈 값으로 변경이 되고, 

비어버린 input 태그의 value에 enteredAmount가 들어가게 되는 것이다.