• Performant, flexible and extensible forms with easy-to-use validation.

1. 제어 컴포넌트와 비제어 컴포넌트

const ControlledInput = () => {
	const [inputValue, setInputValue] = useState('');
	
	const handleInputValue = e => {
		setInputValue(e.target.value);
	}
	
	return (
		<input type="text" value={inputValue} onChange={handleInputValue} />
	)
}

const UncontrolledInput = () => {
	const inputRef = useRef(null);
	
	return {
		<input ref={inputRef} type="text" />
	}
}

const UncontrolledForm = () => {
	const handleSubmit = (event) => {
		event.preventDefault();
		console.log(`Input Value: ${inputRef.current.value}`);
	};
	
	return (
		<form onSubmit={handleSubmit}>
			<UncontrolledInput />
			<button>Submit</button>
		</form>
	)
};

• 그렇다면 제어 컴포넌트와 비제어 컴포넌트는 각각 언제 어떻게 사용하는 것이 좋을까요?
비제어 컴포넌트는 간단하게 사용자가 직접 입력하는 input 이나 select 에 사용하기 좋습니다.
제어 컴포넌트는 훨씬 더 복잡한 커스텀 컴포넌트가 필요한 경우나, 어떤 값이 일반적인 사용자 입력이 아닌 경우에 사용하기 좋습니다. input 이더라도, 팝업이 뜬 후 선택된 값을 입력하게 되는 경우라던가, chip 리스트 등등이 있겠습니다.

2. react-hook-form 의 역할

1. form 관련 보일러플레이트를 줄여주는 역할
react-hook-form 은 비제어 컴포넌트의 보일러 플레이트 코드를 줄여주는 역할도 합니다. 가장 많이 사용되는 react-hook-form 의 API 는 useForm 입니다. 이 훅을 통해서 useRef 관련 여러 보일러 플레이트를 줄여줍니다.

import { useForm } from "react-hook-form"


export default function App() {
  const { register, handleSubmit } = useForm({
    shouldUseNativeValidation: true,
  })
  const onSubmit = async (data) => {
    console.log(data)
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", {
          required: "Please enter your first name.",
        })} // custom message
      />
      <input type="submit" />
    </form>
  )
}

기본적으로 register 함수가 비제어 form 에 필요한 ref 객체나, validation 체크 관련 props 를 자동으로 제공해줍니다. 복잡한 커스텀 input 컴포넌트가 없는 form 을 만들기에는 useForm 이 아주 좋습니다. form 관련 input 컴포넌트들이 많아지면 ref 객체 관리가 어려워지기 시작하는데, 이를 useForm 내부에서 관리해주기 때문이죠.

1. form 관련 추가적 관심사 분리
form 을 사용하는 여러가지 이유 중 하나는 validation 입니다. 어떤 필드는 필수 값이고, 어떤 필드는 숫자만 들어가야하고, 어떤 필드는 이메일 형식이어야 하고 하는 것들을 react-hook-form 으로 조금 더 간단하게 관리 할 수 있도록 지원합니다. (위의 예시 코드를 보시면, register 함수 인자로 required 가 있는 것을 볼 수 있습니다.) 또한, 특정 필드가 변경되었는지 감지하거나, 특정 필드에 블러가 일어났는지 감지하는 등의 기능도 제공합니다.

3. useForm API

1. register
register 는 함수입니다. 이 함수는 비제어 컴포넌트를 form 필드로 등록할 때 사용하기 좋은 함수입니다. useForm 을 통해 form 의 필드를 등록할 때 사용합니다. 비제어 컴포넌트에 사용될 ref 와 form 중 하나의 속성 이름인 name 그리고, 값이 변경될 때 사용될 onChange , 포커스를 잃을 때 사용될 onBlur 함수 4개를 return 합니다.

const { onChange, onBlur, name, ref } = register('firstName'); 
// include type check against field path with the name you have supplied.
        
<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>
// same as above
<input {...register('firstName')} />

register 옵션에 아무것도 두지 않는다면, 위 코드의 firstName 필드는 ref 를 받은 input 이 변경될 때마다 그 값이 잘 변경되게 됩니다.

2. watch
watch 도 함수입니다. form 내의 어떤 필드 또는 form 전체 필드 값들을 볼 수 있는 함수인데요. 이 함수는 리액트의 리렌더링을 유발합니다. 즉, 이 함수를 통해 form 값을 state 처럼 사용할 수 있습니다. form 값이 변경되면 화면 렌더가 변경되어야하는 경우에 이를 쓰기 좋습니다.



function App() {
  const {
    register,
    watch,
    formState: { errors },
    handleSubmit,
  } = useForm<IFormInputs>();
  const watchShowAge = watch("showAge", false); // you can supply default value as second argument
  const watchAllFields = watch(); // when pass nothing as argument, you are watching everything
  const watchFields = watch(["showAge", "name"]); // you can also target specific fields by their names

  const onSubmit = (data: IFormInputs) => {
    console.log("TEST", data);
    // alert(JSON.stringify(data));
  };

  console.log("watchAllFields", watchAllFields);
  console.log("watchFields", watchFields);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Name</label>
        <input
          type="text"
          {...register("name", { required: true, maxLength: 50 })}
        />
        {errors.name && (
          <p>{"The Name Field is Required and must be > 49 characters"}</p>
        )}
        <label>Show Age</label>
        <input type="checkbox" {...register("showAge")} />
        {watchShowAge && (
          <>
            <label>Age</label>
            <input type="number" {...register("age", { min: 50 })} />
            {errors.age && <p>{"The number must be greater then 49"}</p>}
          </>
        )}
        {/* based on yes selection to display Age */}
        <input type="submit" />
      </form>
      <div>
        {watchAllFields.name ? (
          <>
            <label>Watched Fields:</label>name: {watchAllFields.name}
          </>
        ) : (
          ""
        )}
      </div>
    </>
  );
}

예시의 경우 watch 를 통해 showAge 라는 필드를 기준으로 리렌더링을 진행합니다.

3. getValues
watch 와 비슷하지만, 리렌더링을 유발하지 않습니다. 값을 확인하는 용도로 사용합니다.

export default function App() {
  const { register, getValues } = useForm<FormInputs>()


  return (
    <form>
      <input {...register("test")} />
      <input {...register("test1")} />


      <button
        type="button"
        onClick={() => {
          const values = getValues() // { test: "test-input", test1: "test1-input" }
          const singleValue = getValues("test") // "test-input"
          const multipleValues = getValues(["test", "test1"]) // ["test-input", "test1-input"]
        }}
      >
        Get Values
      </button>
    </form>
  )
}

4. control
control 은 객체입니다. useForm 을 통해 등록한 form 관련 정보들을 다른 컴포넌트나 함수에 전달할 때 사용합니다.

5. handleSubmit
handleSubmit 은 form 을 제출할 때 react-hook-form 에서 전처리를 위해 submit 의 기본적인 이벤트를 막고, validation 을 진행합니다. 그 후,
 

4. useController API

function Input({ control, name }) {
  const {
    field,
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields }
  } = useController({
    name,
    control,
    rules: { required: true },
  });


  return (
    <TextField 
      onChange={field.onChange} // send value to hook form 
      onBlur={field.onBlur} // notify when input is touched/blur
      value={field.value} // input value
      name={field.name} // send down the input name
      inputRef={field.ref} // send input ref, so we can focus on input when error appear
    />
  );
}

1. useWatch
useWatch 는 watch 의 리액트 성능 개선 버전입니다. useController 와 같이 소개하는 이유는, 사용하는 느낌이 비슷하기 때문입니다. (실제 구현도 useController 내부에서 useWatch 를 사용하기도 하구요.) 복잡한 form 구현 시 사용하기 좋으며, 하나의 form 필드만 리렌더가 되길 원할 때 사용합니다.

2. Controller
useController 의 Wrapper 컴포넌트 입니다. 개인적으로는 MUI 등 외부 디자인 시스템을 그대로 사용하지 않는 이상 이 컴포넌트를 사용하는 것 보다는 useController 를 통해 구체적으로 정의하는 것이 좋다고 생각합니다.
 

5. 그 외 API

1. useFormContext
useForm 의 form 관련 정보를 control 객체로 넘기다보니, prop drilling 이 생기는 경우가 많아서 지원되는 Context API 입니다. 실제 코드를 봐도 control 객체를 Context API 로 감싸서 제공합니다.

2. useFieldArray
form 의 필드가 동적으로 추가, 삭제 될 수 있는 경우에 사용합니다. 추가적인 기능이지만,
 

7. 결론