react-hook-form 맛보기
리액트react에서 form 쉽게 사용하기
react-hook-form은 리액트 기반의 폼(form) 라이브러리이다.
공식사이트 https://react-hook-form.com/ 에 들어가보면 첫 문장이 이렇게 되어있다
Performant, flexible and extensible forms with easy-to-use validation.
성능이 우수하고 유연하면서 확장 가능한, 그리고 쉬운 Validation(검증) 기능을 곁들인 Form.
ChatGPT에게도 물어보니
이 라이브러리는 간단한 API를 통해 폼 데이터를 처리하고 검증하는 기능을 제공합니다. react-hook-form은 다른 폼 라이브러리와 달리 컴포넌트를 렌더링하지 않기 때문에 성능이 향상됩니다. 또한, 이 라이브러리는 다양한 인풋 타입과 검증 규칙을 지원하며, 사용자 정의 훅을 활용하여 쉽게 확장할 수 있습니다.
오.. 꽤 이해하기 쉬운걸!
구글 빠잉...ㅎreact-hook-form 훑어보기
1. Demo로 너낌적인 너낌 체험하기
공식문서 하단에 보면 Live Demo라고 있는데 이걸 하다보면 약간 감이 온다. (공식문서에 엄청 잘해놧음)
제일 왼쪽 칸에 있는 input에 입력을 하면, 그 값이 자동으로 Watch 되는 걸 볼 수 있고, 그 옆에는 validation 에러가 있을 경우 Errors 정보가 나타난다. 그리고 Touched는 하나라도 터치했던 인풋들의 정보가 나타난다. 이 정보들 모두 각각의 Object에 담겨져있다.
즉, Input들을 받았을 때 프론트엔드에서 처리해줘야 하는 것(= 데이터바인딩, 에러 체크 등)들에 대한 정보를 받아서 처리할 수 있다. 쉽고 빠르게!
그리고 Demo에서 [ EDIT ] 이라는 버튼을 누르면, 실제 내가 Form을 만들어볼 수도 있다. 얘네 정말 공식문서에 잘해놨네...
그러면 이렇게 Form Builder가 나오면서 Input을 create 해볼수도 있고, 오른쪽에는 실제 리액트에서 어떤식으로 code를 써야 하는지 예시가 나온다. 참 좋다. 아, 이건 이렇게 쓰는거구나 하고 바로 감을 알 수 있다. 나처럼 처음 라이브러리를 접하는 사람이라면 Demo를 꼭 해보기를 추천!
2. Hooks로 받을 수 있는 Object들
위에서 체험했듯이, input form에 대한 여러 정보를 받거나 원하는 액션을 처리할 수 있는데, 이러한 역할은이 가능한 Hook들을 제공한다. Hook은 method 혹은 api정도로 보면 될 것 같다. 아래는 가장 많이 쓰는 대표적인 Hook들이다.
1) useForm()
useForm() Hook는 prop 인자로 다음과 같은 것들을 받는다. 그래서 각 필요에 맞는 콜백함수나 값들을 넘길 수 있다.
register: 폼 입력 필드를 등록
handleSubmit: 폼 데이터를 전송
watch: 폼 데이터의 변경을 감지
formState: 폼 데이터 상태를 저장하는 객체
reset: 폼 데이터를 초기화
setError: 폼 필드에 에러 메시지를 설정
clearErrors: 폼 필드에서 에러 메시지를 제거
setValue: 폼 필드의 값을 변경
triggerValidation: 폼 필드의 유효성 검사를 수동으로 트리거
getValues: 모든 폼 필드의 값을 반환
2) Controller()
사실, 이게 뭔지 모르겠어서 공식문서를 보게 됐었던건데, 간단히 이야기하자면 내가 만든 Input 컴포넌트를 분리해서 재사용을 편리하게 할 수 있도록 도와주는 hook이라고 보면 되겠다...음? 무슨 말이지? 리액트 초보로서는 아직 감이 잘 안온다. chatGPT한테 물어봐도 뾰족한 답변이 없다... 이럴땐 구글링(?) ㅋ
역시,
React는 쉬운것 같으면서도 아직 감을 못잡고 있다. 더 익숙해지는 시간이 필요한것같다. 라이브러리들도 사용예시를 더 살펴봐야겠다.
