react-hook-form

react-hook-form은 인풋이나 셀렉트박스와같이
폼을 정말 쉽게 다룰 수 있게 해주는 고마운 라이브러리다.

하지만 사용하면서 몇가지 주의해야할 점이 있다.

첫번째

되도록이면 ref또는 내부상태(useState)나
전역상태(redux)를 섞어쓰지 않도록 한다.

각각의 라이브러리는 그 라이브러리의 목적이 되는 기능은 되도록이면 다 구현되어있고
이부분을 잘 찾아서 써야 예기치않은 버그에 고생하지 않을 수 있다.
즉 해당 라이브러리가 제시하는 best practice를 따라가는것이 좋다.

form의 값을 상태로 저장하려 하지말고 getValues나 watch와 같이 hook으로 받을 수 있는 필드를 쓰는것이 낫다

두번째

값을 초기화할때도 defaultValue나 defaultCheck, value는 안쓰는것이 좋다
이걸 섞어 쓰다가 고장나버린적이 몇번있다.
되도록이면 useForm이 받는 객체의 필드 defaultValues또는 register를 통해 초기값을 설정해주고
api등을 통해 받은 값을 selectbox에 그려준뒤 선택된 값을 초기화해줘야 할 경우에는 엘리먼트의 value를 쓰기보다는 setValue또는 reset을 통해 초기화 해주는것이 좋다

230324추가
onChange도 엘리먼트에 추가하지말고 register의 두번째 매개변수의 onChange로 넘기지 않으면 기대하는 모습으로 동작하지 않는경우가 생긴다

이런 주의점이 있는데도 react-hook-form을 쓰는이유는 너무나도 편리하기때문이다. 아무리 크고 여러페이지의 input을 받을일이 있더라도
formProvider를 사용할 수있고 동적으로 생성되는 input 역시 원래는 redux의 slice를 하나 만들어야 하지만 fieldArray를 사용해서 쉽게 해결할 수 있다

react-hook-form - https://react-hook-form.com/
fieldArray예제 - https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn

useFieldArray를 사용하다가 타입을 주는데 애를먹었는데 이렇게 사용하면 된다

import { useEffect } from 'react'
import { useFieldArray, useFormContext } from 'react-hook-form'
interface FieldValues {
  optionList: {
    optionName: string
    optionValues: string
  }[]
  optionCombinationList: {
    name: string
    value: string
    count: number
    price: number
    saleState?: string
    code?: string
    useYn?: string
  }[]
  allCheck: string
}

export const CombinationSelectionType = () => {
  const { register, control, reset, watch } = useFormContext<FieldValues>()
  const {
    fields: optionList,
    append: appendOptionList,
    remove: removeOptionList,
  } = useFieldArray({
    control,
    name: 'optionList',
  })
  const watchOptionList = watch('optionList')

  const {
    fields: optionCombinationList,
    append: appendOptionCombinationList,
    remove: removeOptionCombinationList,
  } = useFieldArray({
    control,
    name: 'optionCombinationList',
  })
  const watchOptionCombinationList = watch('optionCombinationList')
  const watchAllCheck = watch('allCheck')

  useEffect(() => {
    reset({
      optionList: [
        { optionName: '색깔', optionValues: '블랙,화이트,그린' },
        { optionName: '크기', optionValues: '라지,미디움,스몰' },
      ],
    })
  }, [])
  
  return (...)
}

useFormContext의 제네릭 매개변수에 타입을 넣어주면 된다

그외
defaultChecked는 defaultValues에 들어있는것보다 우선한다
react-hook-form에서는 되도록이면 defaultValues로 기본값을 정하도록 권장하고 있다