🍀 React-Hook-Form 사용해보기

펀딩 개설 페이지를 구현하는 도중 입력 필드가 많아져 상태관리의 필요성을 느꼈고, 무엇보다 gift item list에 dnd-kit(드래그앤드롭)를 붙였더니 끔찍한 리렌더링 이슈가 발생했다.
02언니와 생각해본 해결 방법은 총 두 가지다.

1. 전역상태관리 (Recoil)
2. React Hook Form 적용

사실 두 방법 모두 사용해보지 않아서 뭐든 좋을 것 같았다. 언니가 해보고 싶은 걸 선택해도 좋을 것 같다는 첨언을 해줘서 React Hook Form을 활용해 효과적으로 폼 관리를 해보기로 결정했다.
(각자의 장점이 분명히 있을텐데.. 시간내서 이 부분도 정리해놓겠습니다._)

React-Hook-Form

리액트에서 사용자 입력값을 관리하기 위해선 useState나 useRef를 이용할 수 있지만, React Hook Form를 사용하면 불필요한 렌더링을 줄이면서 더 간단하게 처리할 수 있다.
React Hook Form은 ref 기반이므로, value 속성이 필요하지 않다. (defaultValue를 사용하자!)
바로 API로 넘어가보자.

useForm

useForm은 React-Hook-Form에서 가장 주가 되는 요소이며, 폼을 쉽게 관리하기 위한 커스텀 훅이다.

FormProvider / useFormContext

FormProvider는 React-Hook-Form에서 제공하는 컴포넌트로, React의 Context API를 기반으로 구현되었다. FormProvider는 부모 컴포넌트에서 자식 컴포넌트로 폼 데이터와 관련된 상태+로직을 전달하기 위해 사용된다.

useFormContext는 React-Hook-Form의 컨텍스트에 접근하기 위한 커스텀 훅이다. useFormContext를 사용하면 컨텍스트를 Prop으로 전달하지 않고 접근할 수 있기에 nested structures에서 매우 좋다. 이 훅을 사용하면 useForm에서 반환하는 모든 메서드와 속성을 가져올 수 있다. 즉, useForm의 반환값을 그대로 사용할 수 있다.

const { methods } = useForm();

/* FormProvider 의 props로 useForm 훅을 사용하여 가져온 폼 메서드(methods)를 넘겨줌 */
<FormProvider {...methods} >
  
  	/* 폼 컴포넌트를 포함한 컴포넌트를 자식 컴포넌트로 사용하면 props를 넘겨야 하지만, 
	   FormProvider로 감싼다면 따로 props를 넘기지 않아도 된다. */
  <자식 컴포넌트 />
    ...

useFormContext를 사용하기 위해서는 form을 FormProvider 컴포넌트로 감싸줘야 한다. FormProvider 컴포넌트에 useForm에서 반환한 메서드와 속성(methods)을 전달하면 된다.
그 이후, 자식 컴포넌트에서 useFormContext를 호출하여 해당 메서드와 속성을 가져와 사용할 수 있다.

// 자식 컴포넌트
const { register } = useFormContext();
...
return <TextField label="제목" fullWidth {...register("fundTitle")} />

여기서 중요한 건 ⭐props drilling⭐ 없이 사용 가능하다는 점!이다.

register

• React-Hook-Form에 입력요소를 등록하는데 사용. register하는 과정을 통해 해당 input값을 제어하고, 값을 수집, 유효성 검사 실행 가능 (함수 형태)
• 첫 번째 params는 name으로, 해당 필드에 대한 key값
• 두 번째는 optional 객체. 유효성 검사를 위한 프로퍼티들을 넣을 수 있음
• onChange handler를 바꾸는 것도 가능 optional 객체에 onChange 프로퍼티를 오버라이드 해주면 됨!

<input
  type="text"
  {...register("email", {
    pattern: {
      value:
        /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i,
      message: "올바른 이메일 형식이 아니에요 😕",
    },
  })}

아래는 register 함수에서 사용할 수 있는 옵션이다.

register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref });<br>
type RegisterOptions = Partial<{
  required: boolean | string | { value: boolean; message: string; }; // 필수값 여부 체크합니다.
  min: number | string | { value: number | string; message: string }; // 입력 값의 최솟값 체크합니다.
  max: number | string | { value: number | string; message: string }; // 입력 값의 최댓값 체크합니다.
  maxLength: number | string | { value: number | string; message: string }; // 입력 값의 최대 길이 체크합니다.
  minLength: number | string | { value: number | string; message: string }; // 입력 값의 최소 길이 체크합니다.
  pattern: RegExp | { value: RegExp; message: string }; // 정규식을 사용한 입력 값 체크합니다.
  validate: Validate | Record<string, Validate>; // 커스텀 유효성 체크를 만들 때 사용됩니다.
  valueAsNumber: boolean // Number로 형변환 합니다.
  valueAsDate: boolean // Date로 형변환 합니다.
  setValueAs: (value: any) => any // value를 가공합니다.
  disabled: boolean // true로 설정 시, value가 undefined 되며 요소가 disabled 됩니다.
  onChange: (event: any) => void // change 이벤트 발생 시 실행되는 콜백입니다.
  onBlur: (event: any) => void // blur 이벤트 발생 시 실행되는 콜백입니다.
  value: unknown // 요소가 가지고 있는 값입니다.
  shouldUnregister: boolean // true로 지정할 경우 요소가 언마운트 되면 입력값이 제거됩니다.
  deps: string | string[] // 나열된 요소가 함께 유효성 검증이 실행됩니다.
}>;

type Validate<TFieldValue, TFormValues> = (value: TFieldValue, formValues: TFormValues) => ValidateResult | Promise<ValidateResult>;
type ValidateResult = Message | Message[] | boolean | undefined;

요 입력폼들을 각각의 컴포넌트로 분리할 예정이다.
이유는.. FormProvider와 useFormContext를 사용하는 핵심 개념인 로컬 폼 상태를 활용하여 최적화하기 위해서다.
로컬 폼 상태는 해당 컴포넌트가 직접적으로 의존하는 폼 필드에 대해서만 관리하고 업데이트하므로, 다른 컴포넌트의 리렌더링에 영향을 받지 않는다. 따라서 각 컴포넌트의 성능이슈는 해당 필드에만 영향을 받고, 다른 부모나 형제 컴포넌트들의 리렌더링과는 독립적이다.

🚨 벗 deeply nested structures 라면?
부모 컴포넌트가 FormProvider로 감싸져있고, 그 하위에 여러 개의 자식 컴포넌트가 있다고 해보자.
그 자식 컴포넌트들 중에서 useFormContext를 사용하는 컴포넌트가 있다면, 해당 useFormContext를 사용하는 컴포넌트의 로컬 폼 상태 변경 시, 그 컴포넌트와 그의 자식 컴포넌트들이 리렌더링 될 수 있다.
이는 React의 컴포넌트 트리에서 상위로의 리렌더링 전파로 인해 발생한다.
고로... 깊은 계층구조를 가지는 컴포넌트에서는 useFormContext를 사용하는 컴포넌트의 성능에 영향을 주는 요소들을 최적화하는 것이 중요하다. 필요한 경우 React.memo나 shouldComponentUpdate를 사용하여 부모 컴포넌트의 리렌더링을 최적화하고, useFormContext를 사용하는 컴포넌트 자체의 성능을 개선할 수 있다.

💡 결론! Context는 부모 컴포넌트가 아닌, 자식 컴포넌트들이 리렌더링 될 수 있으니 이 부분을 주의해서 사용하자.