[React] 8. <form /> 태그 다루기

안녕하세요. 박기린 입니다.

 

 

<form /> 제출하기

    <form onSubmit={submitHandler}>
		{... <input /> 들}
      <div className="newExpense__actions">
        <button type="submit">Add Expense</button>
      </div>
    </form>

1. <form> 컴포넌트가 존재하고,
2. <form> 안에 <button> 컴포넌트가 있으며,
3. <button>의 type이 'submit'일 경우,
4. <form>의 onSubmit prop을 이용해서 양식을 제출합니다.

 

onSubmit을 이용하면, 홈페이지의 지정된 버튼을 누르는 것 뿐만 아니라, submit 기능에 관하여 브라우저가 내장하고 있는 기능도 사용할 수 있습니다. 그러니 <form> 컴포넌트를 사용할 경우에는 onSubmit prop을 꼭 이용합시다.

 

 

 

 

 

 

---

onSubmit

  const submitHandler = (event) => {
    event.preventDefault();

    const expenseDate = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };

    console.log(expenseDate);
  };

<form>의 onSubmit은 이름 앞에 'on' 키워드가 들어갑니다. 즉, 핸들러 함수를 인수로 받습니다. 위 코드처럼 sunbmitHandler 함수를 만듭니다.

여기서는 간단하게 console에 출력하는 기능만 만들었지만, 실제 프로그램에서는 서버에 form 데이터를 제출하는 것 등 여러 기능을 넣어주면 됩니다.

 

 

 

핸들러 함수 첫 줄에 event.preventDefault()를 적는 이유는?

1. <form>에서 onSubmit이 작동하면, 브라우저는 이 웹페이지를 호스팅하고 있는 서버에 request를 보냅니다. 
2. 그럴 때마다 JS-브라우저 엔진에 의해 페이지가 초기화(재시작)됩니다.

하지만 페이지가 초기화되는 것을 원하지 않습니다. 작성 중이었던 모든 form 데이터가 날라가기 때문입니다.

개발자는 브라우저가 서버에 데이터를 직접 보내는 것이 아니라, 직접 설계한 JS 함수를 통해 서버와 작업하기를 원합니다.

그래서 이 동작을 막는 방법이 event.preventDefault()를 적어주는 것입니다. evnet.preventDefault()는 브라우저가 호스팅 서버에 request를 보내는 작업을 막아줍니다. 그리고 그 request가 보내지지 않기 때문에 페이지는 초기화되지 않습니다. 그리고 form 데이터는 여전히 남아있어, 직접 서버와 연결작업을 하든 뭘하든 개발자가 지정한 대로 작동하게 됩니다.

 

event.preventDefault()를 사용하기 위해선, 핸들러 함수의 인수로 event를 받아야 합니다. (위 코드처럼, 그냥 핸들러 함수의 인수 영역에 event를 선언해주면 됩니다.)

 

 

 

 

 

 

---

양방향 바인딩

          <input
            type="text"
            value={enteredTitle}
            onChange={titleChangeHandler}
          /> 
          
          <input
            type="number"
            min="0.01"
            step="0.01"
            value={enteredAmount}
            onChange={amountChangeHandler}
          />
          
          <input
            type="Date"
            min="2019-01-01"
            max="2022-12-31"
            value={enteredDate}
            onChange={dateChangeHandler}
          />

위 코드에는 3개의 input 컴포넌트가 있습니다. 각각 title, amount, date라는 값을 입력받는 역할을 가지고 있습니다.

이 input들은 공통적으로 value라는 prop을 가지고 있습니다.

value prop에는 <input> 컴포넌트가 어떤 값(state)을 출력할지를 지정합니다. 이때, <input>이 유저의 입력을 받아 state로 값을 전달할 뿐만 아니라, 역으로 <input>에 변경된 state 값을 전달할 수도 있습니다. 이를 양방향 바인딩이라고 합니다.

 

 

 

 

 

예를 들어, 위 사진 속 <form>안의 <input>들에 입력된 값들이, Add Expense라는 버튼을 누르면 양식이 제출됨과 동시에, <form>이 빈칸으로 초기화되기를 원합니다.

 

 

 

 

 

 

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

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

그러면 submitHandler 함수에, <input>과 value prop으로 연결된 State들을 초기화 하는 코드를 넣어주면 됩니다.

 

 

 

 

 

 

 

그러면 Add Expense 버튼을 눌러 submitHandler 함수가 작동됨에 따라, state들이 모두 초기화되고, <input> 컴포넌트들은 value prop으로 연결된 state의 변경된 (초기화된) 값을 받아 DOM을 업데이트합니다.

이렇게하면, 유저가 <input>을 직접 수정하는 경우가 아니어도, input 내부의 값이 바뀝니다.