Large Rainbow Pointer
728x90
React-Hook-Form 의 FormProvider 로 간편하게 폼 관리하기 (+ useFormContext)
💜 프로젝트 구현2024. 3. 8. 16:09React-Hook-Form 의 FormProvider 로 간편하게 폼 관리하기 (+ useFormContext)

시작하기 앞서...최근 진행했던 프로젝트에서 편지 글 쓰기 페이지 를 구현을 했는데 이를 구현하기 위해 React-Hook-Form 을 사용하고 있다.그런데 개발하면서 정말 좋고 편리한 기능이 있어 이렇게 글을 작성하게 되었다.  실제로 개발을 하다보면 여러 컴포넌트가 생기게 된다.이럴 때 매번 props 로 컴포넌트간 데이터를 다 전달하기엔 너무 복잡하고 힘이 든다. (prop drilling 이 발생)이러한 상황에서 쉽게 폼 데이터를 사용하는 방법이 바로 FormProvider 이다!!!!!!!    또한 개발을 할 때, 폼에 제출할 내용이 input, textarea, select 이런 태그가 아닐 때도 발생한다. 아래 사진은 내가 현재 구현한 페이지인데 슬라이더를 통해 나이 값을 선택하고, 칩 버..

[React] React-Hook-Form 회원가입 입력 폼 유효성 검사
💜 리액트/라이브러리2023. 12. 31. 22:26[React] React-Hook-Form 회원가입 입력 폼 유효성 검사

React 에서 회원가입 기능을 구현하기 위해서입력받은 내용이 필수적으로 입력해야 되고, 글자 수는 몇 자 이상&몇 자 이하, 입력 패턴 등을 고려해야 한다. React 에서 회원가입이나 로그인 등 입력해야 되는 form 을 구현할 때,React Hook Form 을 사용하면 이를 간편하게 구현할 수 있다. React-Hook-Form 세팅설치하기React Hook Form 을 설치하기 위해 터미널 창에 명령어를 입력해 준다. npm install react-hook-form  useFormReact Hook Form 을 사용하기 위해Form 기능을 관리하고 제어하는 hook 인 useForm 을 사용한다. useForm 의 반환 값들은 다음과 같이 register, handleSubmit, watch..

728x90
image
loading