1. react-hook-form을 도입하게 된 계기

• 회원가입폼을 만드는데 모든 필드를 예외처리하기에 너무 많은 수고가 들것으로 예상됨
• 회원가입폼 뿐만 아니라 내가 프로젝트에서 맡은 부분이 다양한 폼이 많은부분이었는데 모든 필드를 예외처리하기엔 벅찼다.
• 남이 봤을때도 코드의 일관성이 있어보이길 원했음
• 제어 컴포넌트를 최대한 적게 사용해보고자함

2. 당연히 에러가 발생했다

as-is

• 상황 : 한 페이지안에서 react-hook-form의 상태를 관리하는것은 문제가 발생하지않음
  그런데 폼을 포함한 페이지안에서 특정버튼 클릭시 모달창을 띄우고 모달창안에서 입력한 값을 돌아와서도 상태를 공유할 수 있게 하고싶었는데 안되더라
• 더 정확히 말하면 상태가 늦게 반영되었다. 그래서 회원가입버튼을 두번눌러야 submit되었다.

• 이 에러도 심지어 내가 설정한 에러메시지도 아니다.

3. 진행상황

• 코드일관성을 위해서 다른 상태관리보단 폼전체를 react-hook-form을 쓰고싶어서 useEffect
  를 사용해서 주소 값이 바뀔경우 useForm의 setValue함수를 사용해서 값을 바꾸어보았다. 그리고 watch함수를 사용해서 바뀌는지도 체크해보았다.
• setValue를하니 해당필드 밖에선 주소필드 값이 공유되긴하는데 절대로 주소필드안으로 값이 들어가지는 않더라
• useForm의 Control컴포넌트를 사용해봐도 마찬가지였다.

4.해결한 방법

to-be

• 해결이라기보단 문제를 회피한것에 가깝긴하다.
• react-hook-form에서 주소규칙을 제외한다.
• 주소를 위한 useState를 만들고 submit할시 state를 true로 바꾸고 주소값이 있을때만 submit할수있도록 변경하였다
• 정리하면 주소만을 예외처리하도록 했다. 그래서 조건부렌더링으로 하단에 에러 메시지를 보여주게 하였다.
• 어디 블로그에서 react-hook-form은 조건부로 렌더링되는 폼에 대해선 상태관리를 안한다고하던데 그게 맞는말인듯 싶다.

다음부터는 웬만하면 설계할때 react-hook-form을 쓸것이라면 페이지안에서 이동하지않고 폼 전체를 작성하도록 설계해야겠다.

만약 이 에러를 우회하지않고 해결한다 하더라도 react-hook-form규칙을 따르기위해 더많은 코드를 쓰게 될듯싶다.