react-hook-form 적용기 (antd)

구 버전의 node 14.17.4 + react 16.13.1 에서 react-hook-form을 적용해보자.

react-hook-form은 Node 16.0.0 이상을 권장한다고 하는데 다음 분기때 버전 올릴 계획도 있고 백오피스에 적용하는거라서 큰 문제가 발생하지 않는다고 판단되어 적용하기로 하였다. 이런 저런 핑계로 지금 안하면 나중에도 못한다.!

 

Node버전과 React버전 별 사용가능한 react-hook-form 버전

Node 버전	React 버전	react-hook-form 버전
12.17.0 이상	16.8.0 이상	7.3.0 이상
14.17.0 이상	16.13.0 이상	7.3.0 이상
16.0.0. 이상	17.0.0 이상	7.3.0 이상
17.0.0. 이상	18.0.0 이상	7.3.0 이상

 

필자가 운영하는 플랫폼은 node 14.17.4 + react 16.13.1 임으로 react-hook-form을 7.3.1로 설치하였다.

$ yarn add react-hook-form@7.3.1

 

 

import 코드

import { useForm, Controller } from 'react-hook-form';
import FormErrorMessage from 'components/FormErrorMessage';

import { Modal, message, Checkbox, Input, InputNumber, Select } from 'antd';

 

Form 코드

Input

<Controller
    name="TEST"
    control={control}
    rules={{ required: 'TEST은(는) 필수 입력입니다.' }}
    render={({ field }) => (
      <>
        <Input {...field} className={cx({ error: errors.TEST })} placeholder="TEST을 입력해주세요." maxLength={50} />
        {errors.TEST && <FormErrorMessage message={errors.TEST.message} />}
      </>
    )}
  />

 

InputNumber

<Controller
    name="TEST"
    control={control}
    // rules={{ required: 'TEST은(는) 필수 입력입니다.' }}
    render={({ field }) => (
      <>
        <InputNumber
          {...field}
          className={cx({ error: errors.TEST })}
          placeholder="TEST를 입력해주세요."
          // showCount
          maxLength={4}
        />

        {errors.TEST && <FormErrorMessage message={errors.TEST.message} />}
      </>
    )}
  />

 

Checkbox

<Controller
  name="TEST"
  control={control}
  render={({ field }) => (
    <>
      <Checkbox {...field} className={cx({ error: errors.TEST })} checked={field.value}>
        TEST
      </Checkbox>
      {errors.TEST && <FormErrorMessage message={errors.TEST.message} />}
    </>
  )}
/>

 

Radio

const DISPLAY_TYPES = { '01': '공개', '02': '비공개', '03': '일부공개(웹)' }
...

<Controller
    name="TEST"
    control={control}
    rules={{ required: 'TEST은 필수 입력입니다.' }}
    render={({ field }) => (
      <>
        <div className={cx('row-box', { error: errors.TEST })}>
          <Radio.Group {...field} className={cx({ error: errors.TEST })} placeholder="TEST을 입력해주세요.">
            {Object.keys(DISPLAY_TYPES).map((item, idx) => (
              <Radio key={idx} value={item}>
                {DISPLAY_TYPES[item]}
              </Radio>
            ))}
          </Radio.Group>
        </div>

        {errors.TEST && <FormErrorMessage message={errors.TEST.message} />}
      </>
    )}
/>

 

Select

<Controller
    name="TEST"
    control={control}
    rules={{ required: 'TEST은(는) 필수 입력입니다.' }}
    render={({ field }) => (
      <>
        <Select
          {...field}
          className={cx({ error: errors.TEST })}
          // mode="tags"
          mode="multiple"
          tokenSeparators={[' ']}
          placeholder="TEST 선택"
          options={options}
        />

        {errors.TEST && <FormErrorMessage message={errors.TEST.message} />}
      </>
    )}
/>

 

ImageSelector

# ImageSelector는 커스텀으로 만든 셀렉터

<Controller
    name="TEST"
    control={control}
    rules={{ required: 'TEST는 필수 입력입니다.' }}
    render={({ field }) => (
      <>
        <div className={cx('row-box', { error: errors.TEST })}>
          <ImageSelector
            {...field}
            type="single"
            value={field.value && { src: field.value }}
            onChange={(value) => {
              if (value !== null) {
                field.onChange(value.src);
              } else {
                field.onChange(null);
              }
            }}
          />
        </div>

        {errors.TEST && <FormErrorMessage message={errors.TEST.message} />}
      </>
    )}
/>

 

TextArea

<Controller
    name="TEST"
    control={control}
    // rules={{ required: 'TEST은(는) 필수 입력입니다.' }}
    render={({ field }) => (
      <>
        <Input.TextArea
          {...field}
          className={cx({ error: errors.TEST })}
          placeholder="TEST을 입력해주세요."
          rows={2}
          showCount
          maxLength={200}
        />

        {errors.TEST && <FormErrorMessage message={errors.TEST.message} />}
      </>
    )}
/>

 

WebEditor

# TinyMceEditor 은 커스텀으로 만든 웹에디터

<Controller
    name="CONTENT"
    control={control}
    rules={{ required: '콘텐츠 내용은 필수 입력입니다.' }}
    render={({ field }) => (
      <>
        <div className={cx('row-box', { error: errors.CONTENT })}>
          <TinyMceEditor
            {...field}
            height="20vh"
            content={field.value}
            onChange={(content) => {
              field.onChange(content);
            }}
          />
        </div>

        {errors.CONTENT && <FormErrorMessage message={errors.CONTENT.message} />}
      </>
    )}
/>

 

 

지금은 시간상 급하게 넣느라 코드가 복잡해 보인다!!! 시간될때 좀더 코드를 줄일수 있는 방법을 생각해보자.

useController등을 통한 각각의 atomic한 컴포넌트 형태로... 암튼 생각생각!

 

 

 

 

참고)

https://react-hook-form.com/form-builder

Form Builder

 

 

https://mycodings.fly.dev/blog/2023-09-10-all-in-one-about-react-hook-form

React Hook Form 사용법 완결판 - 초급편

https://mycodings.fly.dev/blog/2023-09-11-enhanced-tutorial-of-react-hook-form

React Hook Form 사용법 완결판 - 고급편