[React Native] React Hook Form 사용해 보기 (Using React Hook Form)

 

안녕하세요 Foma 입니다!

 

저번 시간에 Form을 만들어 해당 Screen에 정보를 전달하는 방법에 대해 정리해 보았는데요.

 

(해당 코드를 기반으로 진행되니 아직 안보신 분들은 여기 에서 보고와 주세요!)

 

간단하고 더 효율적으로 Form을 만들 수 있는 라이브러리가 있어 사용해 보고 글을 정리하려고 합니다!

 

바로 시작할게요~!

 

언어는 TypeScript, 환경은 Expo로 진행 하겠습니다!

---

React Hook Form이란?

 

React Hook Form은 Form을 사용 하기 쉽게 만든 라이브러리입니다.

 

공식 홈페이지에선 한 줄로 "유용하고 확장 가능하며 사용하기 쉬운 고성능 폼 검증 라이브러리" 라고 소개합니다.

 

장점은 아래와 같습니다.

 

 

더 자세한 내용을 알고 싶다면 공식 홈페이지로 가서 확인해 보시길 바랍니다!

 

Get Started

---

Install

 

React Hook Form을 설치해 줍니다.

 

npm install react-hook-form

 

---

AddPersonForm

 

먼저 useForm과 Controller를 import 해줍니다.

 

import { useForm, Controller } from "react-hook-form";

 

먼저 control과 handleSubmit 으로 useForm을 만들어 줍니다.

 

control은 form 상태를 저장하는 변수이고 handleSubmit은 form을 제출할 때 onSubmit 프로퍼티와 함께 사용될 것입니다.

 

export function AddPersonForm({ onSubmit }: PersonFormProps) {
  const { control, handleSubmit } = useForm();
      ...

 

아래와 같이 Controller 컴포넌트를 활용하는데요.

 

control: 위에서 만든 control을 넣어줍니다.

rules:  폼이 반드시 입력되어야 하는지를 적어줍니다.

name:  폼의 이름을 정해줍니다.

defaultValue: 폼이 입력되지 않았을 때 기본값을 넣어줍니다.

render: onChange와 value 파라미터를 받아 TextInput의 onChangeText와 value에 바인딩 해주어 값이 바뀌면 즉시 TextInput의 입력값이 바뀌도록 합니다.

 

(이 외에도 errors,maxLength 등 다양한 validation을 추가할 수 있습니다.)

 

  return (
    <View>
      <Controller
        control={control}
        rules={{ required: true }}
        name="name"
        defaultValue={""}
        render={({ field: { onChange, value } }) => (
          <TextInput
            onChangeText={onChange}
            value={value}
            style={styles.input}
            placeholder="Enter your name"
          />
        )}
      />

 

Button 컴포넌트에 onPress가 실행될 때 위에서 만든 handleSubmit을 onSubmit 프로퍼티로 data를 전달합니다.

 

      <Button
        onPress={handleSubmit((data) => onSubmit(data as PersonForm))}
        title="Submit"
      ></Button>

---

실행 화면

 

폼에 값을 넣고 Submit 버튼을 누르면 해당 폼에 입력된 값들이 alert로 나타나는 것을 볼 수 있습니다.