Skip to content

Commit ba1c102

Browse files
merging all conflicts
2 parents ba5ef70 + 152a471 commit ba1c102

7 files changed

Lines changed: 1123 additions & 43 deletions

File tree

src/components/ButtonLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function ButtonLink({
3333
className,
3434
'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
3535
{
36-
'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':
36+
'bg-link text-white dark:bg-brand-dark dark:text-gray-90 hover:bg-opacity-80':
3737
type === 'primary',
3838
'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
3939
type === 'secondary',

src/content/reference/react-dom/components/form.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,53 @@ title: "<form>"
4848

4949
## 사용법 {/*usage*/}
5050

51+
<<<<<<< HEAD
5152
### 클라이언트에서 폼 제출 처리하기 {/*handle-form-submission-on-the-client*/}
5253

5354
폼이 제출될 때 함수를 실행하기 위해, 폼의 `action` 프로퍼티에 함수를 전달하세요. [`formData`](https://developer.mozilla.org/ko/docs/Web/API/FormData)가 함수에 인수로 전달되어, 폼에서 전달된 데이터에 접근할 수 있습니다. 이 점이 URL만 받던 기존 [HTML action](https://developer.mozilla.org/ko/docs/Web/HTML/Element/form)과의 차이점입니다. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
55+
=======
56+
### Handle form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
57+
58+
Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page, so call [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to override that behavior.
59+
60+
This example reads the submitted values with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), which collects every field by its `name`. This keeps the inputs [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). If you instead [control an input with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), read from that state on submit rather than from `FormData`.
61+
62+
<Sandpack>
63+
64+
```js src/App.js
65+
export default function Search() {
66+
function handleSubmit(e) {
67+
// Prevent the browser from reloading the page
68+
e.preventDefault();
69+
70+
// Read the form data
71+
const form = e.target;
72+
const formData = new FormData(form);
73+
const query = formData.get("query");
74+
alert(`You searched for '${query}'`);
75+
}
76+
77+
return (
78+
<form onSubmit={handleSubmit}>
79+
<input name="query" />
80+
<button type="submit">Search</button>
81+
</form>
82+
);
83+
}
84+
```
85+
86+
</Sandpack>
87+
88+
<Note>
89+
90+
Reading form data with `onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event), so you can call `e.preventDefault()` and read the data yourself. Passing the function to the `action` prop instead runs the submission in a [Transition](/reference/react/useTransition). React then tracks the pending state, sends thrown errors to the nearest error boundary, and lets the form work with [`useActionState`](/reference/react/useActionState) and [`useOptimistic`](/reference/react/useOptimistic). An `action` can also be a [Server Function](/reference/rsc/server-functions), which `onSubmit` does not support.
91+
92+
</Note>
93+
94+
### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
95+
96+
Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. Unlike `onSubmit`, an `action` runs in a [Transition](/reference/react/useTransition) and calling `e.preventDefault()` isn't needed. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
97+
>>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61
5498
5599
<Sandpack>
56100

src/content/reference/react/Component.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1009,7 +1009,11 @@ state를 파생하면 코드가 장황해지고 컴포넌트에 대해 생각하
10091009
10101010
#### 주의 사항 {/*static-getderivedstatefromprops-caveats*/}
10111011
1012+
<<<<<<< HEAD
10121013
- 이 메서드는 원인에 관계없이 *모든* 렌더링에서 호출됩니다. 이는 부모가 다시 렌더링을 일으킬 때만 발동하고 로컬 `setState`의 결과가 아닐 때만 발동하는 [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops)와는 다릅니다.
1014+
=======
1015+
- This method is fired on *every* render, regardless of the cause. This is different from [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops), which only fires when the parent causes a re-render and not as a result of a local `setState`.
1016+
>>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61
10131017
10141018
- 이 메서드에는 컴포넌트 인스턴스에 대한 액세스 권한이 없습니다. 원하는 경우 클래스 정의 외부 컴포넌트 props 및 state의 순수 함수를 추출하여 `static getDerivedStateFromProps`와 다른 클래스 메서드 사이에 일부 코드를 재사용할 수 있습니다.
10151019

0 commit comments

Comments
 (0)