알아두면 좋은 React Hook Form 최근 변경점들

### 모든 필드를 한 번에 비활성화 시킬 수 있는 disabled 속성 `disabled` 속성은 7.48.0 버전에서 추가된 속성으로, `useForm`에 `true/false`를 넘기면 한 번에 모든 필드를 활성화/비활성화 시킬 수 있습니다. 네트워크 요청이 일어나는 동안 사용자가 인풋을 못 건들게 하고싶을 때 유용하게 쓸 수 있을 것 같네요. ```tsx const App = () => { const [disabled, setDisabled] = useState(false); const { handleSubmit } = useForm({ disabled }); return ( { setDisabled(true); await sleep(100); setDisabled(false); })} / > ); } ``` ### Form 컴포넌트 `` 컴포넌트는 7.44.0 버전에서 추가된 컴포넌트로, 폼 태그를 추상화한 컴포넌트입니다. 사실 전 `useForm()`으로 충분한 것 같은데, 왜 이걸 써야 하지? 라는 생각이 들었습니다. 코드를 살펴보니, 일반적인 케이스보단 서버 액션을 쓰는 케이스를 위해 만들어진 컴포넌트라는 생각이 듭니다. As-is ```tsx const { handleSubmit } = useForm(); const onSubmit = async (data) => { await fetch('/api', { headers: { "content-type": 'application/json', }, body: JSON.stringify(data) }) } ``` To-be ```tsx const { control } = useForm(); ``` Axios / React Query 예제 ```tsx // axios axios(action, values)} /> // SWR, Tan Query mutation(action)} /> ``` ### 전역 에러 전역 에러 타입은 7.43.0에서 추가된 에러 타입으로, `root` 키를 통해 접근 가능한 에러입니다. submit 할 때 발생한 네트워크 에러 값을 루트에 저장해놓고, 특정 UI를 보여주거나 비즈니스 로직 처리가 필요할 때 유용하게 사용할 수 있을 것 같습니다. ```tsx const onSubmit = async () => { const response = await fetch(...) if (response.statusCode > 200) { setError('root.serverError', { type: response.statusCode, }) } } const onClick = () => { setError('root.random', { type: 'random', }) } return ( {errors.root.serverError.type === 400 && server response message} {errors.root?.serverError?.message} {errors.root?.random?.message} ) ```