[React] 사용자 입력 리스닝

사용자가 입력한 값들을 가져와서 어딘가에 저장하기 위해서는 우선
모든 키 입력이나 입력값 변화를 감지하여 수신할 수 있는 리스너를 추가해야한다.

리스너는 요소에서 on으로 시작하는 props로 지정할 수 있다.
여기서 보통은 onChange이벤트를 적용하는데
onChange이벤트의 장점으로는 모든 입력 타입에 같은 이벤트를 사용할 수 있다는 점이다.

바닐라 자바스크립트에선 어떤 요소에 이벤트 리스너를 추가하고 싶다면

document.getElementById('').addEventListener('click', (event) => {})

위처럼 DOM을 사용해 해당 요소를 불러오고 두번째 인자 콜백함수 안에 인자로 event객체를 받아 사용한다.

이처럼 리엑트안에서 이방법을 적용해 본다면,

function ExpenseForm() {
  const [enteredTitle, setEnteredTitle] = useState("");

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

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

export default ExpenseForm;

사용자가 입력한 값을 얻고 싶지만 단지 onChange이벤트를 요소에 등록만 했다고 해서 이루어 지진 않는다.

해당 onChange의 값으로 등록한 포인터인 함수 안에서 이루어지는 로직이 어떤 일(이벤트)이 벌어졌는지에 대한 부분을 설명하는 이벤트 객체를 얻는데,

이는 기본적인 자바스크립트 동작으로 이벤트를 수신할 때 브라우저에서 벌어지는 일이다.

따라서 기본적으로 사용자 입력을 반응하기 위해 onChange속성을 통해 이벤트함수를 전달했고, 리엑트 또는 브라우저 자체에서 변경 이벤트가 발생했을때, 이벤트 객체를 얻을 수 있도록 해주는 것이다!

✔️event.target.value

event.target.value에 있는 value는 이벤트가 벌어졌을 시점의 현재 입력값을 갖는다.
그렇게되면 우리가 수신하는 요소에 이벤트가 발생했을때 입력된 값을 얻을 수 있게된다.

그리하여 키보드를 누를 때마다 그 시점의 현재 입력값을 볼 수 있는 것이다.