회원가입 과정에서 react-hook-form 대신 useState를 사용한 이유

한창 일을 하던 중, 법률 자문을 바탕으로 한 기획 내용 변경으로
제가 담당하는 파트 중 하나인 회원가입에 내용 추가가 이뤄지게 되었는데요,
그 중 하나가 미성년자 가입 불가 관련 표기였습니다.

 

해당 내용이 추가되기 전에는 react-hook-form을 사용해 회원가입의 데이터를 관리했는데요.
미성년자 가입 불가 항목도 처음엔 react-hook-form을 사용하여 한 번에 처리하려 했습니다.

그러자 문제가 발생했습니다.

 

문제 발생

react-hook-form을 사용할 시, 해당 context에 해당된 모든 form-data들이

onSubmit event에 등록되어지고, onSubmit 내부의data가 그대로 api에 전달되어지게 됨으로서

서버에 전달되지 말아야 할 19세 이상 체크 표기 상태(= adultState)도 함께 전달되어

서버 오류가 나게 된다는 점을 1차 개발 완료 후 깨달았습니다.

 

처음엔 체크 표기 상태도 form-data로 한 번에 서버에 요청을 보내고

특정 페이지에 접근하면 GET 요청으로 받아오는 것이 낫다고 생각했는데요.

하지만 좀 더 고민해 본 결과, 프론트에서 관리하는 것이 맞다고 판단했습니다.

몇 가지 이유가 존재하는데요.

 

1) 상태값 하나를 유지하기 위해 API 생성 요청을 하는 것은 불필요한 백엔드 공수를 소모한다.

2) 프론트엔드에서만 컨트롤해도 되는 값으로 보여진다.

 

이 2가지 이유로 프론트에서 adultState 값을 관리했습니다.

또한, 특정 페이지에서만 adultState 값이 필요하고, 전역으로 관리될 필요가 굳이 없었기에

useState와 session storage를 사용하는 방법으로
react-hook-form으로 관리되는 회원 정보와 adultState 개별 데이터로 분리하여

해당 기능에 대한 개발을 완료했습니다.

 

느낀점

이번엔 익숙한 useState로 구현했지만 왠지 react-hook-form으로도 처리가 가능했을 듯 했어요.

공식 문서를 참조하여 react-hook-form의 기능을 하나씩 뜯어보고 리팩토링이 가능하다면

코드에 적용해보려 합니다.