Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: reset.mdx #23

Open
wants to merge 1 commit into
base: master-ko
Choose a base branch
from
+28 −28
Open

Docs: reset.mdx #23

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions src/content/docs/useform/reset.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
---
title: reset
description: Reset form state and values
description: form 상태와 값을 초기화
sidebar: apiLinks
---

## \</> `reset:` <TypeText>`<T>(values?: T | ResetAction<T>, options?: Record<string, boolean>) => void`</TypeText>

Reset the entire form state, fields reference, and subscriptions. There are optional arguments and will allow partial form state reset.
전체 form 상태, 필드 참조 및 구독을 초기화합니다. 선택적 인자가 있으며, 부분적인 form 상태 초기화를 허용할 수 있습니다.

### Props

---

`Reset` has the ability to retain formState. Here are the options you may use:

| Name | Type | Description |
| ------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `values` | <TypeText>object</TypeText> | An optional object to reset form values, and it's recommended to provide the **entire** defaultValues when supplied. |
| `keepErrors` | <TypeText>boolean</TypeText> | All errors will remain. This will not guarantee with further user actions. |
| `keepDirty` | <TypeText>boolean</TypeText> | `DirtyFields` form state will remain, and `isDirty` will temporarily remain as the current state until further user's action.<br/><br/>**Important:** this keep option doesn't reflect form input values but only dirty fields form state. |
| `keepDirtyValues` | <TypeText>boolean</TypeText> | `DirtyFields` and `isDirty` will remained, and only none dirty fields will be updated to the latest rest value. [Check out the example.](https://codesandbox.io/s/react-keepdirtyvalues-o8to91)<br/><br/>**Important:** formState `dirtyFields` will need to be subscribed. |
| `keepValues` | <TypeText>boolean</TypeText> | Form input values will be unchanged. |
| `keepDefaultValues` | <TypeText>boolean</TypeText> | Keep the same defaultValues which are initialised via `useForm`.<ul><li>`isDirty` will be checked again: it is set to be the result of the comparison of any new values provided against the original `defaultValues`.</li> <li>`dirtyFields` will be updated again if values are provided: it is set to be result of the comparison between the new values provided against the original `defaultValues`.</li></ul> |
| `keepIsSubmitted` | <TypeText>boolean</TypeText> | `isSubmitted` state will be unchanged. |
| `keepTouched` | <TypeText>boolean</TypeText> | `isTouched` state will be unchanged. |
| `keepIsValid` | <TypeText>boolean</TypeText> | `isValid` will temporarily persist as the current state until additional user actions. |
| `keepSubmitCount` | <TypeText>boolean</TypeText> | `submitCount` state will be unchanged. |
`Reset`은 formState를 유지하는 옵션을 제공합니다. 다음 옵션을 사용할 수 있습니다:

| Name | Type | Description |
| ------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `values` | <TypeText>object</TypeText> | form 값을 초기화할 선택적 객체로, **전체** defaultValues를 제공하는 것이 권장됩니다. |
| `keepErrors` | <TypeText>boolean</TypeText> | 모든 오류가 유지됩니다. 하지만 이후 사용자 동작에 의해 보장되지 않을 수 있습니다. |
| `keepDirty` | <TypeText>boolean</TypeText> | `DirtyFields` form 상태가 유지되며, `isDirty` 는 이후 사용자 동작이 있을 때까지 일시적으로 현재 상태로 유지됩니다. <br/><br/>**중요:** 이 옵션은 form 입력 값을 반영하지 않고 오직 더티 필드 상태만 유지합니다. |
| `keepDirtyValues` | <TypeText>boolean</TypeText> | `DirtyFields`와 `isDirty`가 유지되며, 더티 상태가 아닌 필드만 최신 초기화 값으로 업데이트됩니다. [예시 확인하기.](https://codesandbox.io/s/react-keepdirtyvalues-o8to91)<br/><br/>**중요:** formState `dirtyFields`를 구독해야 합니다. |
| `keepValues` | <TypeText>boolean</TypeText> | form 입력 값이 변경되지 않습니다. |
| `keepDefaultValues` | <TypeText>boolean</TypeText> | `useForm`을 통해 초기화된 동일한 defaultValues를 유지합니다.<ul><li>`isDirty`는 다시 업데이트됩니다: 이는 제공된 새로운 값과 원래 `defaultValues`의 비교 결과로 설정됩니다.</li><li>값이 제공되면 dirtyFields가 다시 업데이트됩니다: 이는 제공된 새로운 값과 원래 defaultValues 간의 비교 결과로 설정됩니다. </li> </ul> |
| `keepIsSubmitted` | <TypeText>boolean</TypeText> | `isSubmitted` 상태가 변경되지 않습니다. |
| `keepTouched` | <TypeText>boolean</TypeText> | `isTouched` 상태가 변경되지 않습니다. |
| `keepIsValid` | <TypeText>boolean</TypeText> | `isValid` 상태가 이후 사용자 동작이 있을 때까지 현재 상태로 일시적으로 유지됩니다. |
| `keepSubmitCount` | <TypeText>boolean</TypeText> | `submitCount` 상태가 변경되지 않습니다. |

<Admonition type="important" title="Rules">

- For controlled components you will need to pass `defaultValues` to `useForm` in order to `reset` the `Controller` components' value.
- When `defaultValues` is not supplied to `reset` API, then HTML native [reset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) API will be invoked to restore the form.
- Avoid calling `reset` before `useForm`'s `useEffect` is invoked, this is because `useForm`'s subscription needs to be ready before `reset` can send a signal to flush form state update.
- It's recommended to `reset` inside `useEffect` after submission.
- 제어된 컴포넌트의 경우 `defaultValues`를 `useForm`에 전달해야 `Controller` 컴포넌트의 값을 `reset`할 수 있습니다.
- `reset` API에 `defaultValues`가 제공되지 않으면, HTML 기본 [reset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) API가 호출되어 폼이 복원됩니다.
- `useForm`의 `useEffect`가 호출되기 전에 `reset`을 호출하는 것을 피하세요. 이는 `useForm`의 구독이 준비된 후에만 `reset`이 신호를 보내 폼 상태 업데이트를 플러시할 수 있기 때문입니다.
- 제출 후 `useEffect` 내부에서 `reset`을 호출하는 것이 좋습니다.
```javascript
useEffect(() => {
reset({
data: "test",
})
}, [isSubmitSuccessful])
```
- It's fine to run `reset` without argument as long as you have provided a `defaultValues` at useForm.
- `defaultValues`를 useForm에 제공한 경우, 인수 없이 `reset`을 실행하는 것도 가능합니다.

```javascript
reset(); // update form back to default values
```javascript
reset() // form을 기본값으로 다시 업데이트

reset({ test: 'test' }); // update your defaultValues && form values
reset({ test: "test" }) // 기본값과 form 값을 업데이트

reset(undefined, { keepDirtyValues: true }); // reset other form state but keep defaultValues and form values
```
reset(undefined, { keepDirtyValues: true }) // 다른 form 상태를 초기화하지만 기본값과 form 값을 유지
```

</Admonition>

Expand Down Expand Up @@ -107,7 +107,7 @@ export default function App() {
const { register, handleSubmit, reset } = useForm()
const resetAsyncForm = useCallback(async () => {
const result = await fetch("./api/formValues.json") // result: { firstName: 'test', lastName: 'test2' }
reset(result) // asynchronously reset your form values
reset(result) // 비동기로 폼 값을 초기화
}, [reset])

useEffect(() => {
Expand Down Expand Up @@ -259,7 +259,7 @@ function App() {
} = useForm({ defaultValues: { something: "anything" } })

const onSubmit = (data) => {
// It's recommended to reset in useEffect as execution order matters
// 실행 순서가 중요하므로 useEffect에서 reset하는 것이 좋습니다.
// reset({ ...data })
}

Expand Down