이렇게 클릭 이벤트만으로도 할 수 있는데 굳이 form과 onSubmit 이벤트를 사용한 이유는 무엇일까요? onSubmit 이벤트의 경우 인풋에서 Enter를 눌렀을 때도 발생하기 때문입니다. 반면 버튼에서 onClick만 사용했다면, 인풋에서 onKeyPress 이벤트를 통해 Enter를 감지하는 로직을 따로 작성해야 하죠. 그렇기 때문에 이번에는 onClick이 아닌 onSubmit으로 새 항목을 추가하도록 처리했습니다.

코드를 모두 입력했다면 브라우저에서 직접 새 일정 항목을 한번 추가해 보세요.

▲ 그림 10-17 추가 기능 구현 완료

 

일정 항목 추가 기능이 모두 구현되었습니다!