[React] 폼 검증하기

 

사용자가 폼에 적합한 텍스트를 입력하고 있는지 확인하기 위해서 폼을 검증해야한다.

영어대사를 입력해야하는데 한국어를 입력했을 때 --> 한국어를 입력할 수없다는 경고 메세지가 필요하다. 

 

한글이 입력되는지 확인하는 함수인 includesHangul함수를 form 컴포넌트에 넣고

console.log 해보면 한글이 입력됐을 때 false가 반환된다. 

 

한글이 입력됐을 때 경고창이 떠야하기 때문에 useState를 이용해볼것이다. 

에러가 발생하면 에러메세지가 뜨게 상태가 변경되어야 하기 때문에

useState를 사용하고 

setErrorMessage 함수에 "한글은 입력할 수 없습니다"를 넣어준다.

그리고 이 form 컴포넌트를 return 할때

error 메세지를 넣어주면 

하지만 여기서 문제점이 있는데 만약 backspace를 해서 한글을 다 지우고 영어만 남았는데

여전히 한글은 입력할 수 없다는 경고창이 뜰 수가 있다. 

이럴때는 에러메세지를 초기화 시켜주면 된다! 

 

이번에는 빈칸을 입력했을 때 에러메세지가 날 수 있게 해보려고 한다. 

props로 받아왔던 {handleFormSubmit}을 지우고 이것을 함수로 만들어서 받아와보겠다. 

 

이번에는 빈칸으로 setting 하는 것을 if문 위에다 두어서 굳이 else문이 필요없게끔 하였다. 

 

 

 

jsx convention

 

event handler 함수를 만들때는 함수명을 handle 뭐시기 로 지어야하고

event handler 함수를 props로 넘길 때는 on 접두어를 붙여주어야한다.