지출 목록 추가

이를 위해선 입력한 값을 기억할 state가 더 필요하다.

 const [charge, setCharge] = useState("");

 const [amount, setAmount] = useState(0);

현재 charge와 amount의 초깃값은 각각 "" , 0 이다. 이제

인풋필드에 타이핑을 할때 초기값을 해당 값으로 변경할 수 있도록 해보자..

왜 확인버튼 눌렀을때가 아니라 타이핑을 할때 바뀌게 할까…?

이를 위해선 input필드 내에 변화가 있을때 state의 상태를 바꾸는 함수를 만들어야 한다. 이를 App.js에서 만들어주자.

 const handleCharge = () => {

  }

그리고 이 함수는

   <input
            type="text"
            className="form-control"
            id="charge"
            name="charge"
            placeholder="예) 점심값"
            onChange={() => {}}
          />

input내에서 onChange 라는 속성으로 다룰 것임.

저기서 다루려면 App.js에서 함수를 실제 사용할 ExpenseForm.js 까지 함수를 전달해줘야 한다. 뭐로? props로…

<ExpenseForm handleCharge={handleCharge} />

그리고 charge값을 읽을 게터도 props로 보내준다…

왜 보내주는데…? 게터 받아서 어따가 쓰는걸까..?

<ExpenseForm handleCharge={handleCharge} charge={charge} />