[React] 양식 제출 처리하기

✔️ 양식 폼 이벤트 작성

보통 사용자 입력을 받는부분이 있기 마련이고
이에 해당하는 상태들을 리엑트로 관리하곤 했다.

사용자 입력을 받은 폼(form)이 제출이 되도록 만드려면 어떻게 해야할까?

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


  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };

  const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
  };

  const dateChangeHandler = (event) => {
    setEnteredDate(event.target.value);
  };

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

    console.log(expenseData);
    setEnteredTitle("");
    setEnteredAmount("");
    setEnteredDate("");
  };

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

export default ExpenseForm;

버튼과 같은 클릭 이벤트에 직접 이벤트를 수신하기 위한 props인 onClick함수를 적용하여 할 수 있겠지만,

기본적으로 브라우저에 내장된 기본 동작과 웹페이지에 내장된 폼이 있기 때문에, 버튼 요소의 입력 타입이 "submit"이라면 전체에 해당하는 폼 요소를 수신하는 이벤트를 버튼에다가 적용하는걸 생략해도 되고

form 태그에 onSubmit 이벤트를 적용해주면 된다.

따라서 해당 이벤트 함수를 정의하여 적용해주고
기본적인 브라우저의 동작때문에 버튼을 클릭하면 페이지가 로드되어버리는 문제를 방지하기 위한 메소드(event.preventDefault())를 적용해주어야 한다.

왜냐하면 브라우저는 폼이 제출될 때마다 해당 웹페이지를 호스팅하고 있는 서버에 요청을 보내기 때문이다.

그리고나서 입력된 데이터를 담을 객체를 생성해야한다.
위 코드에선 ExpenseData를 만들어서 해당 프로퍼티 키에 상응하는 입력값을 지정해 넣어준걸 확인 할 수 있다.

✔️ 양방향 바인딩 추가하여 입력양식 없애기

그렇다면 입력된것을 화면에서 어떻게 다시 없앨 수 있는걸까?

리엑트에서 state를 사용하게 될때의 장점이 여기서 나타난다.

변경되는 입력값만 수신하는것이 아니라 보내는 즉, 입력에 새로운 값을 다시 전달 할 수도 있는것이다. 이게 바로 양방향 바인딩이라는 것이다.

쉽게말해, 프로그램에 따라 입력값을 초기화하거나 변경할 수 있다는 뜻이다.

방법은??

기본속성인 "value"를 입력요소에 추가하여 관리해 주면 된다.

이는 모든 입력 요소들이 갖는 내부 값의 프로퍼티를 설정한다.
또한 이걸로 새로운 값을 설정할 수도 있다.

양방향 바인딩을 통해서
상태를 업데이트하기 위해서 입력에서 변경사항을 수신하는 것 뿐만 아니라 입력에 상태를 다시 보내주기도 하는것이다.

따라서, 상태를 변경하면 입력도 변하게 된다.(텍스트가 없는 초기화 상태로 변경하면 입력폼도 초기화가 되어지는 것)

이는 만약 폼을 서버로 전송하고 나서 사용자가 입력했던 부분을 오버라이드 하여 입력 부분을 깔끔하게 지워질 수 있게 하는것이다.

양방향 바인딩은 폼으로 작업할 때 아주 유용하다.
그 이유는 폼 전송에 따라 사용자의 입력을 모으거나 변경할 수 있게 하기 때문이다.