React-hook-form 을 써보며 느낀점과 찾은 개선점

좋았던 점

React-hook-form에서 제공해주는 커스텀 훅을 이용하면 정말 간편히 폼을 조작할 수 있었다. 

 

단순히 위처럼 적고 이를 input에 넣어준다면 이메일이 비었을 때, 정규식에 맞지 않을때, checkIsDuplicated라는 비동기 함수에서 true가 아닌 에러를 리턴할 때 각각 알맞은 error를 세팅해준다.

 

코드도 꽤나 깔끔하게 짤 수 있었고 너무 마음에 들었다.

 

별로 였던점

 

아무것도 입력하지 않고 제출 버튼을 누르면 react-hook-form에서 제공하는 함수인 handleSubmit을 실행시켜 error가 있을시에 api request를 보내지 않도록 하였다. 문제는 이 handleSubmit을 실행하면 위와 같이 자동으로 focusing이 된다는 것이다.(에러가 보여야 하는데 자동으로 focusing 돼서 보이지 않는다) 그리고 여러 인풋 중에 focusing 되는 인풋이 내가 다르게 작성한 코드에 따라 바뀌었다. 자동으로 focusing 되는 것도 마음에 안들지만 내가 추가한 기능 때문에 focusing되는 인풋이 바뀌는 것 또한 마음에 들지 않았다

 

React-hook-form 코드 까보기

 

이에대한 의문을 품고 react-hook-form 코드를 까보았다

아니나 다를까 인풋들 중에 하나를 focusing을 해주는 듯한 코드를 발견하였다.

 

로컬에서 실행해보기

아무래도 코드 규모가 큰 오픈소스이다 보니 코드 파악이 쉽지 않았다. 어떻게 동작하는지 코드만 보고 예측하기에는 어려워서 직접 로컬에 코드를 받아서 하나하나 사용해보며 직관적으로 코드를 파악을 해보았다

 

react-hook-form의 내부 코드이다. (역시 깃헙 스타 4만개에 달하는 라이브러리다시피 ㅎㄷㄷ한 코드양과 난이도, 하지만 필요한 부분 위주로 차근차근보면 어렵진 않다)

내가 개선하려고 한 부분의 코드를 하나씩 파악해보고 로컬에서 직접 이 코드들의 동작을 확인해보며 작업을 진행하였다.

 

 

한가지 의문이 드는 코드는 위 코드이다. 굳이 _focusError()를 두 번 호출을 하고 있다. 이게 실수인지 의도된 것인지는 모르겠지만 하나만 적어주어도 제대로 동작을 했고 오히려 저렇게 두 번 호출함으로써 원하는 대로 동작이 수행되지 않았다.

 

<....해결한 부분 추가예정>