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

### 모든 필드를 한 번에 비활성화 시킬 수 있는 disabled 속성

`disabled` 속성은 7.48.0 버전에서 추가된 속성으로, `useForm`에 `true/false`를 넘기면 한 번에 모든 필드를 활성화/비활성화 시킬 수 있습니다.

네트워크 요청이 일어나는 동안 사용자가 인풋을 못 건들게 하고싶을 때 유용하게 쓸 수 있을 것 같네요.

```tsx

const App = () => {

const [disabled, setDisabled] = useState(false);

const { handleSubmit } = useForm({ disabled });

return (

<form

onSubmit={handleSubmit(async () => {

setDisabled(true);

await sleep(100);

setDisabled(false);

})}

/ >

);

}

```

### Form 컴포넌트

`<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)

})

}

<form onSubmit={handleSubmit(onSubmit)} />

```

To-be

```tsx

const { control } = useForm();

<Form

action="/api"

method="post"

control={control}

headers={{

"content-type": 'application/json',

}}

/>

```

Axios / React Query 예제

```tsx

// axios

<Form

action="/api"

method="post"

fetcher={(action, { values }) => axios(action, values)}

/>

// SWR, Tan Query

<Form

action="/api"

method="post"

fetcher={(action, { values }) => 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 && <p>server response message</p>}

<p>{errors.root?.serverError?.message}</p>

<p>{errors.root?.random?.message}</p>

</>

)

```