[ReactNative] react-hook-form

ReactNative에서 react-hook-form을 사용하려면?

➫ Controller 사용해야함.

1. handleSubmit(onSubmit) : data에는 각 value가 들어간다. {ID: '', Password: '', Confirm: ''}
2. rules : 
   1. required : boolean
   2. maxLength, max : number
   3. minLength, min : number
   4. pattern : 정규표현식
   5. validate : function
   6. valueAsNumber, valueAsDate : boolean
   7. setValueAs : <T>(value: any) => T
   8. disable : boolean = false
   9. onChange : (e: SyntheticEvent) => void
   10. onBlur : (e: SyntheticEvent) => void

import { Text, View, TextInput, Button, Alert } from "react-native";
import { useForm, Controller } from "react-hook-form";

export default function App() {
  const { control, handleSubmit, formState: { errors }, watch } = useForm({
    defaultValues: {
      ID: '',
      Password: '',
      Confirm: ''
    }
  });
  
  const password = useRef({});
  password.current = watch("Password", "");
  
  const onSubmit = data => console.log(data); // {ID: '', Password: '', Confirm: ''}
 
  return (
    <View>
      <Controller
        control={control}
        rules={{
            minLength: {
                value: 8,
                message: "아이디 8글자 이상 입력하시오"
            },
            maxLength: {
                value: 15,
                message: "아이디를 15글자 이하 입력하시오"
            },
            required: {
                value: true,
                message: "아이디를 입력하시오"
            }

        }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            placeholder="ID"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
        name="ID"
      />
      {errors.ID && <Text style={{color: 'red'}}>{errors.ID.message}</Text>} // rules에 적은 message가 조건에 맞게 나온다

      <Controller
        control={control}
        rules={{
            minLength: {
                value: 8,
                message: "비밀번호를 8글자 이상 입력하시오"
            },
            maxLength: {
                value: 20,
                message: "비밀번호를 20글자 이하 입력하시오"
            },
            required: {
                value: true,
                message: "비밀번호를 입력하시오"
            }
        }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            placeholder="Password"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
        name="Password"
      />
      {errors.Password && <Text style={{color: 'red'}}>{errors.Password.message}</Text>}
      
      <Controller
        control={control}
        rules={{
            validate: (value) => value === password.current || "비밀번호가 일치하지 않습니다", // 조건이 맞는지 확인한다. 위에서 선언한 password 변수, watch를 이용하여 Password의 value가 저장된다
            required: {
                value: true,
                message: "비밀번호를 입력하시오"
            }
        }}
        render={({ field: { onChange, onBlur, value } }) => (
          <FormInput
            secureTextEntry={true}
            placeholder="비밀번호 확인"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
        name="Confirm"
      />
        {errors.Confirm && <Text style={{color: 'red'}}>{errors.Confirm.message}</Text>}

      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}