[FP] React Hook Form로 리펙토링 하기 (2024. 8. 12.)

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 
학습주제 : Next.js로 최종 프로젝트 만들기

학습내용 : React Hook Form 라이브러리 써보기

학습일 : 2024. 8. 12.

---

오류일지

React Hook Form 을 왜 쓰게 되었느냐?

useState만으로 Input Form 을 관리하는 게 너무 귀찮으니까!!

엄밀히 말하면 useState로만 input의 유효성검사 결과에 따라 UI에 변화를 주는 데 한계를 느꼈기 때문이다.

 

구체적인 예시로 회원가입 페이지를 들 수 있다.

 

나의 의도는 2가지였다.

하나, 인풋에 입력함과 동시에 유효성 검사의 오류메시지를 보여줄 것

두울, 중복체크 버튼을 클릭하면 DB 필터링을 거쳐 사용가능한 이메일(또는 닉네임)인지 판별할 것

 

참 쉬운 건데도 고려할 사항들이 참 많았고, 중복체크는 api통신까지 해야 되기 때문에 싱크가 어긋나 오류메시지를 인지하지 못하는 경우도 생겼다. 무엇보다 실시간으로 상태 메시지를 보여주고, 그 상태 메시지의 여부에 따라 인풋창의 border color 까지 같이 변화를 주는 것이 여간 귀찮은 일이 아니다. (모든 요소의 상태 판별 useState를 줘야 해서 이메일만 하더라도 useState 가 5~8개는 되었다.)

 

각설!

React Hook Form이 input form 관리에 그렇게 효율적이라 하니 나도 활용해보려고 한다.!

내가 만든 auth 페이지 다 적용시켜볼 거고, 일단은 회원가입부터 가즈아아아!

(리펙토링 순서: 회원가입 페이지 >> 로그인 페이지 >> 마이페이지)

 

다음 작업 미리 보기