Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions src/content/docs/usecontroller/controller.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ React Hook Form은 비제어 컴포넌트와 기본 입력 요소를 지향하
| `shouldUnregister` | <TypeText>boolean = false`</TypeText> | | 입력 값은 언마운트 후에 등록이 해제(unregistered)되며, 기본값도 제거됩니다.<br/><br/>**참고:** 이 prop은 `useFieldArray`와 함께 사용하지 않아야 합니다. 입력 값이 언마운트/리마운트 및 재정렬된 후에 `unregister`함수가 호출되기 때문입니다. |
| `disabled` | <TypeText>boolean = false`</TypeText> | | `disabled` prop은 `field` prop에서 반환됩니다. 제어 입력 필드는 비활성화되며, 그 값은 제출 데이터에서 제외됩니다. |
| `defaultValue` | <TypeText>unknown</TypeText> | | **중요:** `useForm`의 `defaultValues` 또는 `defaultValue`에 `undefined`를 적용할 수 없습니다. <ul><li>필드 레벨에서 `defaultValue`를 설정하거나 `useForm`의 `defaultValues`를 사용해야 합니다. <code>useForm</code>에서 <code>defaultValues</code>를 사용한 경우, 이 prop은 생략하세요.</li><li>폼이 기본값으로 `reset`을 호출할 예정이라면, `useForm`에 `defaultValues`를 제공해야 합니다.</li><li>`undefined`를 사용하여 `onChange`를 호출하는 것은 유효하지 않습니다. 대신 `null` 또는 빈 문자열을 기본값/초기화된 값으로 사용해야 합니다.</li></ul> |
| `exact` | <TypeText>boolean = false</TypeText> | | 이 속성(prop)은 인풋 이름 구독에 대한 정확한 일치를 활성화하며, 기본값은 true입니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: exact의 추가
평가: exact 속성이 추가되어 구체적인 기능 설명이 포함되었습니다. 이로 인해 사용자에게 더 많은 정보가 제공되며, 문서의 명확성이 향상되었습니다.

| `exact` | <TypeText>boolean = false</TypeText> | | 이 속성은 인풋 이름 구독에 대해 정확한 일치를 활성화합니다. 기본값은 `true`입니다. |

### Return
Expand Down
35 changes: 35 additions & 0 deletions src/content/docs/useform.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,10 @@ sidebar: apiLinks
| [criteriaMode](#criteriaMode) | 모든 유효성 검사 에러를 한 번에 노출하거나 하나씩 노출. |
| [shouldFocusError](#shouldFocusError) | 내장된 포커스 관리를 활성화하거나 비활성화. |
| [delayError](#delayError) | 에러가 즉시 나타나는 것을 지연. |
| [validate](#validate) | 폼 수준 검증은 내장 검증 메서드로 제한됩니다. |
| [shouldUseNativeValidation](#shouldUseNativeValidation) | 브라우저 내장 폼 제약 조건 API 사용. |
| [shouldUnregister](#shouldUnregister) | 언마운트 후 입력의 등록 취소(unregister)를 활성화하거나 비활성화. |
| [progressive](/docs/useform/form) | `Form` 컴포넌트를 사용할 때 네이티브 폼 제출을 위한 점진적 향상을 활성화합니다. |

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: | [progressive](/docs/useform/form)| [progressive](/docs/useform/form) | Form 컴포넌트를 사용할 때 네이티브 폼 제출을 위한 점진적 향상을 활성화합니다.
평가: 번역이 명확하고 내용이 잘 전달되고 있습니다.

| [disabled](#disabled) | 전체 폼과 해당 폼에 포함된 모든 입력을 비활성화합니다. |

**스키마 유효성 검사 속성:**
Expand Down Expand Up @@ -277,6 +279,39 @@ useForm({
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| 이 설정은 에러 상태가 사용자에게 표시되는 것을 지정된 밀리초만큼 지연시킵니다. 만약 사용자가 에러가 발생한 입력을 수정하면 에러는 즉시 제거되며, 지연이 적용되지 않습니다. | <CodeSandbox url="https://codesandbox.io/s/useform-delayerror-q6c2d"/> |

#### validate: <TypeText>Function</TypeText> {#validate}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: {+#### validate: <TypeText>Function</TypeText> {#validate}+}
평가: 서브타이틀을 적절하게 번역하여 사용자의 이해를 돕고 있습니다.


---

이 예제는 **새로운 `validate` API**와 `useForm`을 결합하여 React 애플리케이션에서 **폼 수준 검증**을 수행하는 방법을 보여줍니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: {+이 예제는 **새로운 validateAPI**와useForm을 결합하여 React 애플리케이션에서 **폼 수준 검증**을 수행하는 방법을 보여줍니다.+}
평가: 번역이 자연스럽고 원문의 의미를 잘 전달합니다.


`validate` 함수는 전체 폼 객체를 받고, `formState.errors`와 통합된 **구조화된 에러**를 반환할 수 있습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: {+validate함수는 전체 폼 객체를 받고,formState.errors와 통합된 **구조화된 에러**를 반환할 수 있습니다.+}
평가: 내용이 명확하게 전달되며, 기술적 용어 사용이 적절합니다.


**Examples:**

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: {+**Examples:**+}
평가: 적절히 번역된 제목으로 문맥을 잘 반영하고 있습니다.


---

```javascript copy
const {
register,
formState: { errors },
} = useForm({
validate: async ({ formValues }: FormValidateResult) => {
if (formValues.test1.length > formValues.test.length) {
return {
type: "formError",
message: "여기 뭔가 잘못되었습니다.",
}
}

if (formValue.test === "test") {
return "직접적인 에러 메시지"
}

return true
},
})

#### shouldUnregister: <TypeText>boolean = false</TypeText> {#shouldUnregister}

---
Expand Down
3 changes: 1 addition & 2 deletions src/content/docs/useform/clearerrors.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ sidebar: apiLinks

<Admonition type="important" title="규칙">

- 이 메서드는 각 입력 필드에 연결된 유효성 검사 규칙에는 영향을 주지 않습니다.
- 이 메서드는 유효성 검사 규칙이나 `isValid` formState에는 영향을 미치지 않습니다.
- 이 메서드는 인풋에 연결된 검증 규칙에 영향을 미치지 않으며, <code>formState.isValid</code>에도 영향을 주지 않습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 각 입력 필드에인풋에
평가: '각 입력 필드'보다는 '인풋'이 번역 규칙에 따라 더 일관되며, 문맥에 맞습니다.


Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 이 메서드는 유효성 검사 규칙이나 isValid formState에는 영향을 주지 않습니다.검증 규칙에 영향을 미치지 않으며, <code>formState.isValid</code>에도 영향을 주지 않습니다.
평가: '이 메서드는 유효성 검사 규칙이나'라는 표현이 다소 어색했으나, '검증 규칙에 영향을 미치지 않으며,'로 자연스럽게 수정되어 의미와 흐름이 개선되었습니다.

</Admonition>

Expand Down
9 changes: 0 additions & 9 deletions src/content/docs/useform/handlesubmit.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,6 @@ sidebar: apiLinks

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

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: handleSubmit을 사용하면 폼을 비동기적으로 쉽게 제출할 수 있습니다.-(삭제)
평가: 이 설명은 코드 예제와 중복되어 불필요하므로 삭제된 것은 적절함.

- handleSubmit을 사용하면 폼을 비동기적으로 쉽게 제출할 수 있습니다.

```javascript copy
handleSubmit(onSubmit)()

// 비동기 유효성 검사를 위해 async 함수를 전달할 수 있습니다.
handleSubmit(async (data) => await fetchAPI(data))
```

- `disabled`된 입력은 폼 값에서 `undefined`로 나타납니다. 입력을 사용자가 수정하지 못하게 하면서 값을 유지하려면, `readOnly`를 사용하거나 전체 &lt;fieldset /&gt;을 disabled할 수 있습니다. [예시](https://codesandbox.io/s/react-hook-form-disabled-inputs-oihxx)를 참고하세요.
- `handleSubmit` 함수는 onSubmit 콜백 내부에서 발생한 에러를 처리하지 않으므로, 비동기 요청에서 에러를 처리할 때는 try-catch를 사용하여 유저에게 에러를 친절하게 처리해 주는 것을 권장합니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 비동기 유효성 검사를 위해 async 함수를 전달할 수 있습니다.-(삭제)
평가: 비슷한 이유로, 코드 내에서 명확히 보여지므로 삭제한 것이 좋음.


Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(원본 line=26 → patch 내 line=24 로 스냅)

변경: handleSubmit 함수는 onSubmit 콜백 내부에서 발생한 에러를 처리하지 않으므로, 비동기 요청에서 에러를 처리할 때는 try-catch를 사용하여 유저에게 에러를 친절하게 처리해 주는 것을 권장합니다.-(삭제)
평가: 유저에게 에러를 처리하는 방법에 대한 설명이 지나치게 자세해서 삭제한 것이 더 간결하고 이해하기 쉽게 만듭니다.

Expand Down
30 changes: 13 additions & 17 deletions src/content/docs/useform/register.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -102,32 +102,28 @@ By selecting the register option, the API table below will get updated.

<ul>
<li>
이름은 **필수**이며 **고유**해야 합니다(기본 라디오 및 체크박스 제외).
입력 이름은 점과 대괄호 구문을 모두 지원하므로 중첩된 폼 필드를 쉽게 만들 수 있습니다.
</li>
<strong>Name</strong>은 <strong>필수</strong>이며 <strong>고유해야</strong> 합니다

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 이름은 **필수**이며 **고유**해야 합니다(기본-<strong>Name</strong>은 <strong>필수</strong>이며 <strong>고유해야</strong> 합니다
평가: 번역 규칙에 따른 용어 사용이 강화되고, 기술적 세부사항이 더 명확해졌습니다.

(네이티브 라디오 및 체크박스 인풋을 제외하고).
<li>
이름은 은 숫자로 시작하거나 키 이름으로 숫자를 사용할 수 없습니다. 특수 문자의 사용도 피해야 합니다.
</li>
<li>
TypeScript 사용 시 일관성을 위해 점 구문만을 사용하고 있으므로, 배열 폼 값에는 대괄호 `[]` 를 사용할 수 없습니다.

```javascript
register('test.0.firstName'); // ✅
register('test[0]firstName'); // ❌
```
이름은 숫자로 시작하거나 숫자를 독립 키로 사용할 수 없으며, 특수 문자는 피해야 합니다.
TypeScript 일관성을 위해 점(dot) 구문만 지원됩니다—대괄호 구문(<code>[]</code>)은 배열 폼 값에 기능하지 않습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 점 구문만을 사용하고 있으므로,-점(dot) 구문만 지원됩니다—대괄호 구문(<code>[]</code>)은
평가: '점'을 '점(dot)'으로 보강하여 명확성을 높였고, 기술 용어에 대한 이해도를 높였습니다.

</li>
```
register("test.0.firstName") // ✅
register("test[0].firstName") // ❌

<li>비활성화된 입력은 undefined 폼 값을 결과로 제공합니다. 사용자가 입력을 업데이트하지 못하도록 하려면 `readOnly`를 사용하거나 전체 `fieldset`을 비활성화할 수 있습니다. 다음은 [예제](https://codesandbox.io/s/react-hook-form-disabled-inputs-oihxx)입니다.</li>

<li>필드 배열을 생성하려면 입력 이름 뒤에 점과 숫자를 붙여야 합니다. 예: `test.0.data`</li>

<li>렌더링할 때마다 이름을 변경하면 새로운 입력이 등록(registered)됩니다. 따라서 각 등록된(registered) 입력에 대해 고정된 이름을 사용하는 것이 좋습니다.</li>

<li> 비활성화된 인풋은 <code>undefined</code>를 폼 값으로 반환합니다.
사용자 편집을 방지하면서 값을 유지하려면 <code>readOnly</code>를 사용하거나 전체 <code>fieldset</code>을 비활성화하세요. [예제](https://codesandbox.io/s/react-hook-form-disabled-inputs-oihxx)가 있습니다.</li>
<li>각 렌더링 시 인풋의 <code>name</code>을 변경하면 새 필드로 재등록됩니다.
<li>언마운트에 따라 입력 값과 참조는 더 이상 제거되지 않습니다. 해당 값과 참조를 제거하려면 unregister를 호출할 수 있습니다.</li>

일관된 동작을 보장하려면 렌더링 간에 인풋 이름을 안정적으로 유지하세요.</li>

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 새로운 입력이 등록(registered)됩니다. 따라서 각 등록된(registered) 입력에 대해 고정된 이름을 사용하는 것이 좋습니다.새 필드로 재등록됩니다.
평가: 구체적으로 간결해졌고, 문장의 명확성이 증가했습니다.

<li>인풋 값과 참조는 언마운트 시 자동으로 제거되지 않습니다.
<li>
개별 register 옵션은 `undefined`나 `{}`로 제거할 수 없습니다. 대신 개별 속성을 업데이트할 수 있습니다.
필요할 때 <a href="/docs/useform/unregister"><code>unregister</code></a>를 사용하여 명시적으로 제거하세요.</li>

```javascript

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 개별 register 옵션은 undefined{}로 제거할 수 없습니다. 대신 개별 속성을 업데이트할 수 있습니다.필요할 때 <a href="/docs/useform/unregister"><code>unregister</code></a>를 사용하여 명시적으로 제거하세요.
평가: 보다 명확한 방법을 제시하여 독자의 이해를 돕고 실용성을 증가시켰습니다.

register('test', { required: true });
Expand Down
22 changes: 2 additions & 20 deletions src/content/docs/useform/reset.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,26 +29,8 @@ sidebar: apiLinks

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

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 제어 컴포넌트의 경우... API가 호출되어 폼이 복원됩니다.초기화할 때 항상 <code>defaultValues</code>를 제공하는 것이 권장됩니다. 이렇게 하면 특히 제어된 인풋 컴포넌트가 올바르게 복원됩니다.
평가: 번역 규칙에 따라 '기본값으로 다시 업데이트'를 '초기화할 때 항상 defaultValues를 제공하는 것이 권장됩니다.'로 명확히 하여 사용자에게 더 직관적인 정보를 제공하고, 문맥을 명확하게 함. 또한, '기본값'이 언급되는 부분에서 'defaultValues'를 직접 사용한 점이 기술적으로 정확하다.

- 제어 컴포넌트의 경우 `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`이 신호를 보내 폼 상태 업데이트를 flush할 수 있기 때문입니다.
- submission 후 `useEffect` 내부에서 `reset`을 호출하는 것이 좋습니다.
```javascript
useEffect(() => {
reset({
data: "test",
})
}, [isSubmitSuccessful])
```
- `defaultValues`를 useForm에 제공한 경우, 인자 없이 `reset`을 실행하는 것도 가능합니다.

```javascript
reset() // 폼을 기본값으로 다시 업데이트

reset({ test: "test" }) // 기본값과 폼 값을 업데이트

reset(undefined, { keepDirtyValues: true }) // 다른 폼 상태를 초기화하지만 기본값과 폼 값을 유지
```
- 폼을 초기화할 때 항상 <code>defaultValues</code>를 제공하는 것이 권장됩니다.
이렇게 하면 특히 제어된 인풋 컴포넌트가 올바르게 복원됩니다.

</Admonition>

Expand Down
9 changes: 3 additions & 6 deletions src/content/docs/useform/seterror.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,11 @@ sidebar: apiLinks
setError("root.serverError", {
type: "400",
})
setError("root.random", {
type: "random",
})
```
- 이 메서드는 비동기 유효성 검사 후, 사용자에게 에러 피드백을 제공하려는 경우, `handleSubmit` 메서드에서 유용할 수 있습니다. (예: API에서 유효성 검사 에러 반환 시)
- `shouldFocus`는 입력 필드가 비활성화된 경우 작동하지 않습니다.
- 이 메서드는 `isValid` 폼 상태를 `false`로 강제 설정합니다. 그러나 `isValid`는 항상 입력 등록 규칙 또는 스키마 결과의 유효성 검사 결과에서 파생된다는 점에 유의해야 합니다.
- 타입 검사를 방해하지 않기 위해 `type`과 `types`라는 키워드는 피해야 합니다.
- 이 메서드는 <code>formState.isValid</code>를 <code>false</code>로 설정합니다. 그러나 <code>isValid</code>는 항상 등록된 인풋 또는 스키마의 검증 결과에서 파생됩니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: isValid 폼 상태를 false로 강제<code>formState.isValid</code>를 <code>false</code>로
평가: 번역 규칙에 따라 코드를 명확히 표현하였으며, 규칙에 맞게 technical term을 영어로 명시하여 가독성을 높였습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: isValid는<code>isValid</code>는
평가: 기술 용어를 코드 강조 형식으로 명시하여 일관성을 유지하고 가독성을 높였습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 입력 등록 규칙등록된 인풋
평가: 용어를 통일한 사용으로 번역 규칙을 잘 따랐습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 스키마 결과의 유효성 검사스키마의 검증
평가: 더 자연스러운 한국어 표현으로 수정하여 의미를 효과적으로 전달하였습니다.


- 타입 체크와의 충돌을 방지하기 위해 피해야 할 특정 키워드가 있습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 검사를 방해하지 않기 위해체크와의 충돌을 방지하기 위해
평가: 더 명확하고 자연스러운 표현으로 수정하여 이해도를 높였습니다.


</Admonition>

Expand Down
16 changes: 0 additions & 16 deletions src/content/docs/useform/setvalue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,22 +35,6 @@ sidebar: apiLinks
setValue("array.0.test2", "2")
```

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 존재하지 않는 필드를 대상으로 지정하면 이 메서드는 새 필드를 생성하지 않습니다.존재하지 않는 필드에 대해 설정하면 이 메서드는 새 필드를 생성하지 않습니다.
평가: '대상으로 지정하면'에서 '대상'이라는 어색한 표현이 개선되어 자연스러운 한국어로 수정되었습니다.

- 존재하지 않는 필드를 대상으로 지정하면 이 메서드는 새 필드를 생성하지 않습니다.

```javascript
const { replace } = useFieldArray({ name: "test" })

// ❌ 새로운 입력 필드를 생성하지 않음
setValue("test.101.data")

// ✅ 전체 필드 배열을 새로 고침
replace([{ data: "test" }])
```

- 다음 조건에서만 리렌더링이 트리거됩니다:

- 값 업데이트로 인해 에러가 발생하거나 수정된 경우.
- `setValue`가 dirty나 touched와 같은 상태 업데이트를 유발하는 경우.

- 두 번째 인자를 중첩된 객체로 만드는 것보다 필드 이름을 대상으로 설정하는 것이 좋습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(원본 line=41 → patch 내 line=40 로 스냅)

변경: 다음 조건에서만 리렌더링이 트리거됩니다:다음 조건에서만 리렌더링이 발생합니다:
평가: '트리거됩니다'라는 표현보다 '발생합니다'가 더 자연스러운 한국어로 읽히며 의미를 더욱 명확하게 전달합니다.

Expand Down
9 changes: 1 addition & 8 deletions src/content/docs/useform/subscribe.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar: apiLinks

## `subscribe:` <TypeText>`UseFormSubscribe<TFieldValues extends FieldValues>`</TypeText>

[`formState`](/docs/useform/formState) 변경사항과 값 업데이트를 구독합니다. 개별 필드나 전체 폼을 구독할 수 있으며, 폼 변경으로 인한 불필요한 리렌더링을 방지할 수 있습니다.
[`formState`](/docs/useform/formstate) 변경 및 값 업데이트에 구독하세요. 개별 필드 또는 전체 폼에 구독할 수 있으며, 폼 변경으로 인한 불필요한 리렌더링을 피할 수 있습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 변경사항과변경 및
평가: '변경사항과'는 문맥상 어색하며 '변경 및'으로 바뀌면서 문장이 더 매끄럽고 자연스럽게 연결되어 의미 전달이 개선되었다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 업데이트를 구독합니다.업데이트에 구독하세요.
평가: 명령형 표현으로 바뀌어 사용자가 직관적으로 이해하기 쉬워졌다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 필드나필드 또는
평가: '또는'이 사용되면서 의미의 명확성이 향상되고 읽기 쉬워졌다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 폼을폼에
평가: '구독할 수 있으며, 폼에...'로의 변경이 문장 구조를 더 자연스럽게 만들어 주었다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 방지할피할
평가: '피할'로 대체되어 표현이 간결해지고, 의미 전달이 보다 명확하게 되었다.


### Props

Expand All @@ -23,13 +23,6 @@ sidebar: apiLinks
<Admonition type="important" title="참고사항">

<ul>
<li>
<p>
이 함수는 변경사항 구독만을 위한 것이며, 상태 업데이트 dispatch나 리렌더링
트리거는 허용되지 않습니다. 예: `setValue` 또는 `reset`
</p>
</li>
<li>
<p>
이 함수는 <code>createFormControl.subscribe</code>와 동일한 기능을
공유합니다. 다만 [createFormControl](/docs/createFormControl)은 React
Expand Down
6 changes: 5 additions & 1 deletion src/content/docs/useformstate.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@ sidebar: apiLinks
<SelectNav
options={[
{
label: "FormStateSubscribe",
label: "폼 상태 구독(FormStateSubscribe)",

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: "FormStateSubscribe""폼 상태 구독(FormStateSubscribe)"
평가: 'FormStateSubscribe'의 한국어 번역이 적절하게 이루어져 있으며, 원문의 의미를 명확히 전달하고 있다. 사용자가 혼동하지 않도록 영어 원문을 병기한 점도 긍정적이다.

value: "/docs/useformstate/formstatesubscribe",
},
{
label: "FormStateSubscribe",
value: "/docs/useformstate/errormessage",
},
{
label: "ErrorMessage",
value: "/docs/useformstate/errormessage",
Expand Down
17 changes: 8 additions & 9 deletions src/content/docs/useformstate/formstatesubscribe.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ sidebar: apiLinks

## \</> `FormStateSubscribe:` <TypeText>Component</TypeText>

`useFormState`와 동일한 기능을 컴포넌트 형태로 제공하는 React Hook Form 컴포넌트입니다. 다른 컴포넌트 내부에서 훅을 사용하는 대신, `<FormStateSubscribe />`를 JSX에서 직접 사용하여 폼 상태를 구독하고 렌더링할 수 있습니다.
`useFormState`와 동일한 기능을 제공하는 React Hook Form 컴포넌트입니다. 다른 컴포넌트 내에서 훅을 사용하는 대신, JSX에서 `<FormStateSubscribe />`를 직접 사용하여 폼 상태를 구독하고 렌더링할 수 있습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 컴포넌트 형태로형태로
평가: '컴포넌트 형태로'는 어색하게 긴 표현이므로 간결한 '형태로'로 수정하여 자연스러움을 높였습니다.


### Props

---

| Name | Type | Description |
| ---------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `control` | <TypeText>Object</TypeText> | `useForm`에서 제공하는 [`control`](/docs/useform/control) 객체입니다. `FormProvider`를 사용하는 경우 선택 사항입니다. |
| `name` | <TypeText>string \| string[] </TypeText> | 단일 인풋 이름, 인풋 이름 배열을 제공하거나, 모든 인풋의 formState 업데이트를 구독합니다. |
| `disabled` | <TypeText>boolean = false</TypeText> | 구독을 비활성화하는 옵션입니다. |
| `exact` | <TypeText>boolean = false</TypeText> | 이 속성은 인풋 이름 구독에 대해 정확한 일치를 활성화합니다. |
| `render` | <TypeText>Function</TypeText> | 지정된 폼 필드의 폼 상태를 구독하고, 폼 상태가 변경될 때마다 자식 함수를 리렌더링합니다. 이를 통해 상태를 수동으로 연결하지 않고도 JSX에서 선언적으로 폼 상태를 사용할있습니다. |
| Name | Type | Description |
| ---------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `control` | <TypeText>Object</TypeText> | [`control`](/docs/useform/control) 객체로, `useForm`에 의해 제공됩니다. `FormProvider`를 사용하는 경우 선택적입니다. |

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: useForm에서 제공하는 객체입니다.useForm에 의해 제공됩니다.
평가: 보다 간결하고 자연스럽게 전달되는 문장으로 개선되었습니다.

| `name` | <TypeText>string \| string[] </TypeText> | 단일 인풋 이름, 배열 형태로 여러 인풋 이름을 제공하거나 모든 인풋의 formState 업데이트를 구독합니다. |

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 이름 배열을 제공하거나이름을 제공하거나
평가: '이름 배열을 제공하거나'는 중복적인 표현으로 보이며, '이름을 제공하거나'로 수정하여 흐름이 더욱 매끄러워졌습니다.

| `disabled` | <TypeText>boolean = false</TypeText> | 구독을 비활성화할 옵션입니다. |

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 비활성화하는비활성화할
평가: '비활성화하는'은 문장에 어색함을 줄 수 있으므로 '비활성화할'로 수정하여 자연스러움을 높였습니다.

| `exact` | <TypeText>boolean = false</TypeText> | 이 속성은 인풋 이름 구독에 대해 정확한 일치를 활성화합니다. |
| `render` | <TypeText>Function</TypeText> | 지정된 폼 필드의 form state에 구독하고 폼 상태가 변경될 때마다 자식 함수를 리렌더링합니다. 이를 통해 상태를 수동으로 연결하지 않고도 JSX에서 선언적으로 폼 상태를 소비할있게 해줍니다. |

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 폼 상태를 구독하고form state에 구독하고
평가: 용어 통일성을 위해 '폼 상태'를 'form state'로 변경함으로써 기술적인 정확성을 유지하였습니다.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변경: 사용할소비할
평가: '사용할'보다 '소비할'이 더 적합한 기술적 용어로 확인되어 수정되었습니다.


**Examples:**

Expand All @@ -45,4 +45,3 @@ const App = () => {
</div>
)
}
```
Loading