TIL - 20220512

 20220511일자 TIL에 다음과 같은 질문이 올라왔다.

 필자는 onKeyPress(알아보다가 이제 onKeyPress를 지원하지 않기 때문에 onKeyDown을 사용한다는 사실도 배웠다)를 이용해 Enter 키를 입력할 경우 버튼을 클릭했을 때 호출하는 함수를 호출하도록 진행했었는데, Enter 키를 처리하는 또 다른 방법이 존재한다! 그 방법은 다음과 같다.

props로 물려 받은 onSubmit 함수는 어제자 onClick 함수와 똑같은 코드를 넣어도 동작한다! 대신, input과 button을 form 태그로 감싸고, button의 type을 submit으로 해야 하며, submit 이벤트는 페이지를 새로고침 하기 때문에 코드의 handleSubmit 함수(지금 보니 함수 뒤 return에 빈 줄 추가를 안 했다...)처럼 preventDefault를 추가해줘야 한다. 이렇게 하면 어제자 코드처럼 정상적으로 동작한다. 어느 방법이 더 낫다 별로다 구분지을수 없는 부족한 지식이지만 칼자루를 많이 갖고 있으면 적을 상대할 때 좋은 것처럼 칼자루를 하나 얻어간다고 생각해야겠다.