카카오테크캠퍼스 2기 | STEP2 | 22일차(24-07-23) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 22일차(24-07-23) 회고

📝 react-hook-form

• 처음에는 모든 폼 필드를 제어 컴포넌트로 구현했다. 입력값을 useState로 관리하고, 변화가 있을 때마다 상태를 업데이트하는 방식이었다. 이 접근 방식에는 두 가지 주요 문제가 있었다.
  1. 폼이 커질수록 상태와 이벤트 핸들러가 많아지면서 코드가 매우 복잡해졌다.
  2. 각 입력값 변화마다 전체 폼 컴포넌트가 리렌더링 되어 성능 문제가 발생했다.
• React Hook Form 라이브러리를 알게 되었고, 이 라이브러리가 제어 컴포넌트의 문제를 해결해 줄 수 있다는 것을 알게 되었다. React Hook Form은 폼 상태 관리를 훨씬 간단하게 만들어주고, 불필요한 리렌더링을 줄여준다.

 

📝 useForm 훅 사용

• useForm 훅을 사용하면 폼의 상태를 쉽게 관리할 수 있다. 특히, defaultValues 옵션을 통해 초기값을 설정할 수 있어서, 폼의 상태를 일관되게 유지할 수 있었다.
  • defaultValues: 폼의 초기값을 설정한다.
  • mode: 폼의 검증 타이밍을 설정한다. 기본값은 onSubmit이며, onBlur, onChange, onTouched 등으로 설정할 수 있다.
  • reValidateMode: 이미 검증된 필드를 다시 검증하는 타이밍을 설정한다. 기본값은 onChange이다.
  • resolver: 커스텀 검증을 위해 사용한다. Yup, Zod 등의 라이브러리와 함께 사용할 수 있다.

const methods = useForm<OrderFormData>({
  defaultValues: {
    productId: id,
    productQuantity: count,
    senderId: 0,
    receiverId: 0,
    hasCashReceipt: false,
  },
});

 

 

📝 register 함수 사용

• 각 필드의 유효성을 검사하는 로직도 필요했다. react-hook-form은 register 함수를 통해 필드에 검증 규칙을 쉽게 추가할 수 있다.
  1. required: 필수 입력 필드를 설정한다.
  2. pattern: 정규식을 사용하여 입력 값을 검증한다.
  3. validate: 커스텀 검증 함수를 설정한다.
  4. minLength: 최소 입력 길이를 설정한다.
  5. maxLength: 최대 입력 길이를 설정한다.

<input
  {...register("cashReceiptNumber", {
    required: "현금영수증 번호를 입력해주세요.",
    pattern: {
      value: /^\d+$/,
      message: "현금영수증 번호는 숫자로만 입력해주세요."
    }
  })}
/>
<textarea
  {...register("messageCardTextMessage", {
    required: "메시지를 입력해주세요.",
    minLength: {
      value: 1,
      message: "메시지는 최소 1자 이상이어야 합니다."
    },
    maxLength: {
      value: 100,
      message: "메시지는 100자 이내로 입력해주세요."
    }
  })}
/>

 

📝 handleSubmit 함수 사용

• 폼을 제출할 때 데이터를 서버로 보내기 전에 검증이 필요했다. react-hook-form의 handleSubmit 함수를 사용하여 이를 간단하게 처리할 수 있었다.

const handleForm = (values: OrderFormData) => {
  const { errorMessage, isValid } = validateOrderForm(values);
  if (!isValid) {
    alert(errorMessage);
    return;
  }
  console.log('values', values);
  alert('주문이 완료되었습니다.');
};

 

📝 FormProvider와 useFormContext 사용

• FormProvider와 useForm을 사용하여 폼을 구현했다. handleSubmit 함수와 preventEnterKeySubmission 이벤트 핸들러를 통해 폼 제출 시 검증과 기본 이벤트를 처리했다.

<FormProvider {...methods}>
  <form action="" onSubmit={handleSubmit(handleForm)} onKeyDown={preventEnterKeySubmission}>
    <SplitLayout sidebar={<OrderFormOrderInfo orderHistory={orderHistory} />}>
      <Wrapper>
        <OrderFormMessageCard />
        <Spacing height={8} backgroundColor="#ededed" />
        <GoodsInfo orderHistory={orderHistory} />
      </Wrapper>
    </SplitLayout>
  </form>
</FormProvider>

 

📝 Daily Scrum

• 지난주 pr 회고

 

😋 Today 회고

• react-hook-form을 사용하면서 폼 상태 관리와 검증 로직을 간소화할 수 있었다. 특히, useForm과 FormProvider를 통해 폼의 초기값 설정과 상태 관리를 일관되게 유지할 수 있었다. 또한, handleSubmit 함수를 통해 검증 로직을 간단하게 구현할 수 있었다. 앞으로 더 복잡한 폼을 구현할 때에도 유용하게 사용할 수 있을 것 같다.

 

➡️ 참고 링크

https://tech.osci.kr/introduce-react-hook-form/

react-hook-form 을 활용해 효과적으로 폼 관리하기 - 오픈소스컨설팅 테크블로그 %

https://cocococo.tistory.com/entry/React-React-Hook-Form

[React] React Hook Form 사용한 Validation(검증) 처리 방법