[React] 02. 이벤트 처리하기

Reset, Calculate 버튼을 클릭했을때 발생하는 이벤트를 처리해 보자

const submitHandler = (event) => {
    event.preventDefault(); // 다시 로드되는 것을 막음
    //...
    console.log("SUBMIT");
  };
// Calculate 버튼을 눌렀을 경우 실행됨

  const resetHandler = () => {
    //...
    console.log("RESET");
  };
// Reset 버튼을 눌렀을 경우 실행됨

  const inputchangeHandler = (input, value) => {
    console.log(input, value);
  };
// 사용자가 input 창에 입력을 하면 실행됨

 현재는 console.log()를 통해 콘솔창에 출력하는 기능밖에 없지만 Usestate, 정보 내리기, 올리기 등을 통해 기능을

완성할 것이다.

<input onChange={(event) =>
inputchangeHandler("current-savings", event.target.value)}
type="number"
id="current-savings"
/>

inputchangeHandler 함수는 general 함수로 일반적인 props에 포인터를 전달하는 방식으로 실행 할 수 없기때문에 

식별자와 전달된 이벤트 객체에 입력된 값을 매개변수로 전달해 주어서 실행시킨다.

식별자는 input 태그마다 고유하도록 하드코딩하였다.