들어가기에 앞서

• React Hook Form(이하 RHF)을 처음에 사용하자고 한 이유가
  • 아직 RHF가 많이 사용되는 것으로 알고 있고
    • server action이 나온지 1년 정도밖에 되지 않아서,, (next 13.4)
  • 클라이언트 사이드에서도 유효성 검사를 수행하는 것이 UX 관점에서 유리하며
    • 사용자가 입력한 내용이 매번 서버로 왔다갔다한다면,,?
  • 사용자의 입력에 대해 실시간으로 유효성 검사가 가능하기 때문에 사용하자고 이야기했습니다.
• 하지만 관련 내용을 정리하다보니까
  • 기존 server action이나 RHF 하나만 사용하는 것에 비해 복잡도가 상당히 증가하여
  • 학습을 위한 자원이 상당히 많이 발생할 수도 있을 것 같아
• 어느정도 타협한다면 굳이 두가지를 전부 사용하지 않아도 괜찮을 것 같다는 생각이 듭니다.
• 일단 관련 내용을 정리하며 server action만 사용하는 경우도 추가로 정리할테니
  • 회의 때 이야기해봐도 좋을 것 같습니다
• 에러 메시지를 어떻게 처리할지에 대해 이야기 해봐야 할 것 같습니다

React Hook Form을 사용하는 것이 좋은 이유

• 프론트엔드 단에서도 유효성 검사를 해주는 것이 UX 관점에서 유리

  • server action만 사용하면 사용자가 입력한 내용이 서버까지 왔다갔다하기 때문에,,,
  • valid한 데이터면 몰라도 invalid한 데이터일 경우에도 무조건 서버에 들러야,,

• 사용자의 입력에 대해 실시간으로 유효성 검사가 가능

  • server action만 사용하게 된다면 사용자가 submit을 할 시에만 유효성을 체크함
  • 그렇다고 저희가 구현하기에는 귀찮으니까,,

• RHF은 정말 많이 사용됨

  • 알아둬서 나쁠건 없을 것 같아요,,!

  

설치

npm i react-hook-form @hookform/resolvers

// zod 관련해서 간단하게 찾아봐주시면 좋을 것 같습니다!
npm i zod

사용한 컴포넌트