TIL - 20220511 (부제: React에서 Enter입력 처리하기)

 오늘도 제출한 과제에 대한 피드백을 진행하며 다음과 같은 피드백을 받게 됐다. 피드백을 진행하며 공부한 내용을 정리하고자 한다.

 피드백을 본 다음에 바로 든 생각은 button의 type을 submit으로 바꾸면 끝나는 문제아닌가? 라고 생각했다. 물론 아니었다. 구글링을 통해 알아본 결과, input창에서 enter 키를 입력했을 때, 입력 버튼을 눌렀을 때 실행하는 함수를 호출해주면 해결되는 문제였다.

그런데, input창에서 enter 키를 누르면 uncaught typeerror: cannot read properties of undefined (reading 'preventdefault')와 같은 에러를 만나게 되었다. 원인은 handleAddTodoClick의 코드가 다음과 같았기 때문이다.

여기서 내가 해결한 방법은 button의 type이 button이라 button을 클릭해도 새로고침이 되지 않는다. 항상, onClick 이벤트를 처리하는 함수에 e.preventDefault()를 넣는 것이 습관이 되버려서 아무 생각없이 적었다 에러를 만나게 된 것이다. 따라서, handleAddTodoClick 함수에서 인자 e와 e.preventDefault()를 지워도 문제없이 작동하게 된다.