이게 뭔가요?

• 리액트 환경에서 폼 데이터의 라이프사이클을 관리할 수 있는 라이브러리입니다.

주요 기능

• 인풋 상태창의 포커싱 여부를 관리
• 컴포넌트를 뛰어 넘는 데이터를 전역적으로 관리 가능
• 인풋 데이터의 밸리데이션 여부에 따라 submit 여부를 자동으로 관리해줌
• 인풋 데이터의 변화를 자동으로 감지

사용법

useForm

form 데이터를 관리하는 하나의 객체

const SomeComponent = () => {	
	const {
	  handleSubmit,
	  control,
	  formState: { errors },
	  getValues,
	} = useForm<IJoin>();
	
	return (<>...</>)
}

• control: 해당 컴포넌트와 useForm을 연결
• handleSubmit: 제출시 발생하는 이벤트 핸들러. 일반적으로 button의 onPress에서 활용
• typescript에서는 일반적으로 오브젝트를 아래처럼 타입으로 관리

export interface IJoin {
  phoneNumber: string;
  email: string;
  passwordRepeat: string;
  passWord: string;
  nickName: string;
  verification: string;
}

기타 자세한 메서드는 API Doc 참조

https://react-hook-form.com/api/useform

Controller

<Controller
  control={control}
  render={({ field: { onChange, onBlur, value } }) => (
    <Input
      type={type}
      onBlur={onBlur}
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      error={errors[name]?.message}
    />
  )}
  name={name}
  rules={rules}
/>

• useForm에 등록되는 엘레먼트