[작성중] react-hook-form의 useForm

Yi Kanghoon·2024년 3월 1일

개요

대학원 졸업 논문 심사 시스템(nextJs, mantine, useForm 사용) 개발 중 form의 기본값을 useEffect를 이용해 fetching 이후에 바꾸어 주려고 시도했으나 정상적으로 작동하지 않음

상세

url 직접 입력이 아닌 페이지 내부 버튼을 이용해 해당 페이지에 접근시 form에 기본값 (이미 저장되어 있던 값)이 정상적으로 나타나지 않았음
url을 직접 입력하여 접근하거나 페이지 새로고침시에는 의도한대로 form에 기본값이 나타남

원인

useForm의 리턴 요소 중 values를 사용하여 값을 변경하였다(...)
useForm의 각각의 value, validation, 제출 상태 등은 모두 state로 useForm 내부에서 관리하는데, 이를 어렴풋이 생각하고도 그대로 value를 직접 변경한것이다.

react state의 불변성

불변성은 특정 값을 변경하는 것이 아니라 새로운 값을 만들어내는 방법이자 react의 state 사용에서의 원칙이다.

react가 함수형 컴포넌트에서 화면을 업데이트해야 하는지 확인하는 과정은 아래와 같다.

컴포넌트의 shouldComponentUpdate메소드의 리턴값이 false이면 (즉, 리렌더링할 필요가 없으면) 멈추고, true이면 (즉 리렌더링이 필요하면) 다음으로 넘어간다.

vDOM과 DOM을 비교하여 변경이 있으면 화면을 다시 그린다.

여기서 나의 실수이자 불변성의 중요성이 드러나는데, shouldComponentUpdate의 리턴값을 결정하기 위해 react는 컴포넌트 데이터의 값들이 변경되었는지 비교한다.

state를 변경할때 setState 함수를 이용하지 않고 state = 1234와 같이 변경하게 되면 원본이 아무런 복사없이 변경되고, 당연히 원본과 바꾸려는 값이 동일해지기에 shouldComponentUpdate는 false를 리턴, 리렌더링이 일어 나지 않는다.

useForm 공식문서 읽기

이런 어이없는 실수를 한 김에 useForm의 공식문서를 다시 읽고 정리해두겠다. 잘만쓰면 정말 편리한 react-hooks니까.

useFormProps

useForm을 사용할때 전달하는 prop들이다

mode: onChange

submit하기 전의 validation strategy
1. onSubmit: submit이 일어날때
2. onBlur: 해당 항목에 focus를 잃을 때
3. onChange: 해당 항목을 수정할 때
4. onTouched: 최초 blur, 이후 change 이벤트에서
5. all: onBlur + onChange

reValidateMode

submit 이후의 validation strategy
onTouched, all을 제외한 옵션을 사용할 수 있다.

defaultValues

form 전체 항목들의 기본값
각각의 항목에 대해 defaultValue를 설정할 수 있지만 본 prop을 이용해 한번에 설정하는 것이 권장된다.

useForm({
  defaultValues: {
    firstName: '',
    lastName: ''
  }
})

// 비동기적으로 기본값 설정하기 
useForm({
  defaultValues: async () => fetch('/api-endpoint');
})

defaultValue로 undefined를 사용하는 것은 default state와의 충돌을 유발하므로 피해야 한다

프로토타입 메서드를 사용하는 커스텀 객체를 제공하는 것은 피하는 것이 좋다

values

form value를 update하는 대상이 되는 객체
서버에서 데이터를 가져와서 그 값을 이용하여 update할 때 유용하다

function App({ values }) {
  useForm({
    values, // prop update 떄 form 값을 update 한다.
  })
}

function App() {
  const values = useFetch("/api")

  useForm({
    defaultValues: {
      firstName: "",
      lastName: "",
    },
    values, // value가 리턴될때(데이터 fetching이 일어난 이후에) form 값을 update한다.
  })
}