Skip to content

Commit b20bc17

Browse files
lumirlumirlumirlumir
authored
docs: update useActionState.md 
1 parent ddb9805 commit b20bc17

File tree

1 file changed

+23
-32
lines changed

1 file changed

+23
-32
lines changed

‎src/content/reference/react/useActionState.md‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: useActionState
44

55
<Intro>
66

7-
`useActionState`는 폼 액션의 결과를 기반으로 state를 업데이트할 수 있도록 제공하는 Hook입니다.
7+
`useActionState`는 폼 액션의 결과를 기반으로 State를 업데이트할 수 있도록 제공하는 Hook입니다.
88

99
```js
1010
const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);
@@ -18,6 +18,7 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin
1818
1919
</Note>
2020
21+
2122
<InlineToc />
2223
2324
---
@@ -28,7 +29,7 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin
2829
2930
{/* TODO T164397693: link to actions documentation once it exists */}
3031
31-
컴포넌트 함수(또는 최상위 레벨)에서 `useActionState`를 호출하여 [폼 액션이 실행될 때](/reference/react-dom/components/form) 업데이트되는 컴포넌트 state를 생성합니다. `useActionState`는 기존의 폼 액션 함수와 초기 state를 전달받고, 폼에서 사용할 새로운 액션을 반환합니다. 또한 최신 폼 state와 액션이 진행 중인지 여부(`isPending`)도 반환합니다. 이때 최신 폼 state는 `useActionState`에 전달한 함수에도 함께 전달됩니다.
32+
`useActionState`를 컴포넌트의 최상위 레벨에서 호출하여 [폼 액션이 실행될 때](/reference/react-dom/components/form) 업데이트되는 컴포넌트 State를 생성하세요. `useActionState`는 기존의 폼 액션 함수와 초기 State를 전달받고, 폼에서 사용할 새로운 액션을 반환합니다. 또한 최신 폼 State와 액션이 대기 중인지 여부(`isPending`)도 반환합니다. 이때 최신 폼 State는 `useActionState`에 전달한 함수에도 함께 전달됩니다.
3233
3334
```js
3435
import { useActionState } from "react";
@@ -48,38 +49,32 @@ function StatefulForm({}) {
4849
}
4950
```
5051
51-
폼 state는 폼을 마지막으로 제출했을 때 액션에서 반환되는 값입니다. 아직 폼을 제출하지 않았다면, `initialState`로 설정됩니다.
52-
53-
서버 함수(Server Function)와 함께 사용하는 경우, `useActionState`를 통해 하이드레이션(hydration)이 끝나기 전에도 폼 제출에 대한 서버 응답을 표시할 수 있습니다.
52+
폼 State는 폼을 마지막으로 제출했을 때 액션에서 반환되는 값입니다. 아직 폼을 제출하지 않았다면, `initialState`로 설정됩니다.
5453
55-
If used with a Server Function, `useActionState` allows the server's response from submitting the form to be shown even before hydration has completed. {/*TODO*/}
54+
서버 함수<sup>Server Function</sup>와 함께 사용하는 경우, `useActionState`를 통해 하이드레이션<sup>Hydration</sup>이 끝나기 전에도 폼 제출에 대한 서버 응답을 표시할 수 있습니다.
5655
57-
[아래에서 더 많은 예시를 확인해 보세요.](#usage)
56+
[아래 예시를 참고하세요.](#usage)
5857
5958
#### 매개변수 {/*parameters*/}
6059
61-
* `fn`: 폼이 제출되거나 버튼이 눌렸을 때 호출될 함수입니다. 함수가 호출되면 첫 번째 인수로 폼의 이전 state가 전달됩니다(처음에는 `initialState`, 그 뒤로는 액션의 마지막 반환값). 그 뒤 일반적인 폼 액션과 동일하게 인수들이 이어집니다.
62-
* `initialState`: 초기 state로 사용될 직렬화 가능한 값입니다. 액션이 처음 호출된 뒤에는 더 이상 이 값이 사용되지 않습니다.
63-
* **optional** `permalink`: 점진적 향상(progressive enhancement) 기법을 사용하는 동적 콘텐츠(예: 피드) 페이지에서 유용한 옵션입니다. `fn`이 [서버 함수(Server Function)](/reference/rsc/server-functions)이고, 자바스크립트 번들이 로드되기 전에 폼이 제출된다면 브라우저는 현재 페이지가 아니라 이 `permalink` URL로 이동합니다. React가 상태를 올바르게 이어 받기 위해, 대상 페이지에서도 동일한 폼 컴포넌트를 렌더링해야 합니다(`fn`과 `permalink`가 동일해야 함). 폼이 하이드레이션된 뒤에는 이 매개변수는 더 이상 영향을 주지 않습니다.
64-
65-
* `fn`: The function to be called when the form is submitted or button pressed. When the function is called, it will receive the previous state of the form (initially the `initialState` that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
66-
* `initialState`: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.
67-
* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (e.g. feeds) in conjunction with progressive enhancement: if `fn` is a [server function](/reference/rsc/server-functions) and the form is submitted before the JavaScript bundle loads, the browser will navigate to the specified permalink URL, rather than the current page's URL. Ensure that the same form component is rendered on the destination page (including the same action `fn` and `permalink`) so that React knows how to pass the state through. Once the form has been hydrated, this parameter has no effect. {/*TODO*/}
60+
* `fn`: 폼이 제출되거나 버튼이 눌렸을 때 호출되는 함수입니다. 함수가 호출되면 첫 번째 인수로 폼의 이전 State(처음에는 전달한 `initialState`, 이후에는 이전 반환값)가 전달되고, 그 뒤로는 폼 액션이 일반적으로 받는 인수들이 전달됩니다.
61+
* `initialState`: State가 처음에 가지기를 원하는 값입니다. 이는 직렬화 가능한 값이면 무엇이든 될 수 있습니다. 이 인수는 액션이 처음 호출된 후에는 무시됩니다.
62+
* **optional** `permalink`: 이 폼이 수정하는 고유한 페이지 URL을 포함하는 문자열입니다. 동적 콘텐츠가 있는 페이지(예: 피드)에서 점진적 향상<sup>Progressive Enhancement</sup>과 함께 사용됩니다. 만약 `fn`이 [서버 함수](/reference/rsc/server-functions)이고, 폼이 자바스크립트 번들이 로드되기 전에 제출되면, 브라우저는 현재 페이지의 URL 대신 지정된 영구 링크<sup>Permalink</sup> URL로 이동합니다. React가 State를 전달하는 방법을 알 수 있도록, 동일한 폼 컴포넌트가 대상 페이지에 렌더링되도록 해야 합니다. (동일한 액션 `fn`과 `permalink` 포함.) 폼이 하이드레이션된 후, 이 매개변수는 더 이상 효과가 없습니다.
6863
6964
{/* TODO T164397693: link to serializable values docs once it exists */}
7065
7166
#### 반환값 {/*returns*/}
7267
7368
`useActionState`는 다음 세 가지 값을 담은 배열을 반환합니다.
7469
75-
1. 현재 state입니다. 첫 렌더링 시에는 `initialState`와 일치하며, 액션이 실행된 후에는 액션이 반환한 값과 일치합니다.
76-
2. `<form>` 컴포넌트의 `action` prop이나 폼 내부 `<button>` 컴포넌트의 `formAction` prop에 전달할 수 있는 새 액션입니다.
77-
3. 폼 액션이 진행 중인지 여부를 알려주는 `isPending` 플래그입니다.
70+
1. 현재 State입니다. 첫 렌더링 시에는 `initialState`와 일치하며, 액션이 실행된 후에는 액션이 반환한 값과 일치합니다.
71+
2. `<form>` 컴포넌트의 `action` Prop이나 폼 내부 `<button>` 컴포넌트의 `formAction` Prop에 전달할 수 있는 새 액션입니다.
72+
3. 폼 액션이 대기 중인지 여부를 알려주는 `isPending` 플래그입니다.
7873
7974
#### 주의 사항 {/*caveats*/}
8075
81-
* React 서버 컴포넌트를 지원하는 프레임워크에서 `useActionState`를 사용하면, 클라이언트 자바스크립트 실행 전에도 폼과 상호작용할 수 있습니다. 만약 서버 컴포넌트를 사용하지 않는다면, 이는 단순히 컴포넌트 로컬 state와 동일하게 동작합니다.
82-
* `useActionState`에 전달된 함수는 첫 번째 인수로 이전 또는 초기 state를 추가로 받습니다. 즉, 직접 폼 액션을 사용했을 때와 비교해 함수의 시그니처가 달라질 수 있습니다.
76+
* React 서버 컴포넌트를 지원하는 프레임워크에서 `useActionState`를 사용하면, 클라이언트 자바스크립트 실행 전에도 폼과 상호작용할 수 있습니다. 만약 서버 컴포넌트를 사용하지 않는다면, 이는 단순히 컴포넌트 지역 State와 동일하게 동작합니다.
77+
* `useActionState`에 전달된 함수는 첫 번째 인수로 이전 또는 초기 State를 추가로 받습니다. 즉, 직접 폼 액션을 사용했을 때와 비교해 함수의 시그니처가 달라질 수 있습니다.
8378
8479
---
8580
@@ -104,15 +99,15 @@ function MyComponent() {
10499
}
105100
```
106101
107-
`useActionState`가 반환하는 배열은 다음과 같은 요소를 갖습니다:
102+
`useActionState`가 반환하는 배열은 다음과 같은 요소를 갖습니다.
108103
109-
1. 폼의 <CodeStep step={1}>현재 state</CodeStep>입니다. 처음에는 전달한 <CodeStep step={4}>초기 state</CodeStep>로 설정되며, 폼이 제출된 후에는 전달한 <CodeStep step={3}>액션</CodeStep>의 반환값으로 설정됩니다.
110-
2. `<form>`의 `action` prop에 전달할 <CodeStep step={2}>새로운 액션</CodeStep>입니다.
111-
3. 액션이 처리되는 동안 사용할 수 있는 <CodeStep step={1}>대기(Pending) state</CodeStep>입니다.
104+
1. 폼의 <CodeStep step={1}>현재 State</CodeStep>입니다. 처음에는 전달한 <CodeStep step={4}>초기 State</CodeStep>로 설정되며, 폼이 제출된 후에는 전달한 <CodeStep step={3}>액션</CodeStep>의 반환값으로 설정됩니다.
105+
2. `<form>`의 `action` Prop에 전달할 <CodeStep step={2}>새로운 액션</CodeStep>입니다.
106+
3. 액션이 처리되는 동안 사용할 수 있는 <CodeStep step={1}>대기<sup>Pending</sup> State</CodeStep>입니다.
112107
113-
폼 제출 시, <CodeStep step={3}>액션</CodeStep> 함수가 호출되고 그 반환값이 폼의 새로운 <CodeStep step={1}>현재 state</CodeStep>가 됩니다.
108+
폼 제출 시, <CodeStep step={3}>액션</CodeStep> 함수가 호출되고 그 반환값이 폼의 새로운 <CodeStep step={1}>현재 State</CodeStep>가 됩니다.
114109
115-
또한 <CodeStep step={3}>액션</CodeStep> 함수는 새롭게 추가된 첫 번째 인수로 폼의 <CodeStep step={1}>현재 state</CodeStep>를 받습니다. (처음엔 <CodeStep step={4}>초기 state</CodeStep>, 그 후에는 직전 반환값) 나머지 인수들은 일반 폼 액션 호출과 동일합니다.
110+
또한 <CodeStep step={3}>액션</CodeStep> 함수는 새롭게 추가된 첫 번째 인수로 폼의 <CodeStep step={1}>현재 State</CodeStep>를 받습니다. (처음엔 <CodeStep step={4}>초기 State</CodeStep>, 그 후에는 직전 반환값) 나머지 인수들은 일반 폼 액션 호출과 동일합니다.
116111
117112
```js [[3, 1, "action"], [1, 1, "currentState"]]
118113
function action(currentState, formData) {
@@ -125,9 +120,7 @@ function action(currentState, formData) {
125120
126121
#### 오류 표시하기 {/*display-form-errors*/}
127122
128-
서버 함수(Server Function)에서 반환된 오류 메시지나 토스트 메시지를 표시하려면, 해당 액션을 `useActionState`로 감싸 주세요.
129-
130-
To display messages such as an error message or toast that's returned by a Server Function, wrap the action in a call to `useActionState`.
123+
서버 함수<sup>Server Function</sup>에서 반환된 오류 메시지나 토스트 메시지를 표시하려면, 해당 액션을 `useActionState`로 감싸주세요.
131124
132125
<Sandpack>
133126
@@ -191,9 +184,7 @@ form button {
191184
192185
#### 폼 제출 후 구조화된 정보 표시하기 {/*display-structured-information-after-submitting-a-form*/}
193186
194-
서버 함수(Server Function)의 반환값은 직렬화 가능한 어떤 값이든 가능합니다. 예를 들어, 액션 성공 여부를 나타내는 불리언, 오류 메시지, 업데이트된 객체 등 다양하게 활용할 수 있습니다.
195-
196-
The return value from a Server Function can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information. {/*TODO*/}
187+
서버 함수<sup>Server Function</sup>의 반환값은 직렬화 가능한 어떤 값이든 가능합니다. 예를 들어, 액션 성공 여부를 나타내는 불리언, 오류 메시지, 업데이트된 객체 등 다양하게 활용할 수 있습니다.
197188
198189
<Sandpack>
199190
@@ -272,7 +263,7 @@ form button {
272263
273264
### 액션이 더 이상 제출된 폼 데이터를 읽을 수 없습니다 {/*my-action-can-no-longer-read-the-submitted-form-data*/}
274265
275-
액션을 `useActionState`로 감싸면 *첫 번째 인수*로 “이전(또는 현재) state”가 추가됩니다. 따라서 일반적인 폼 액션과 달리, 제출된 폼 데이터는 *두 번째 인수*에서 확인해야 합니다.
266+
액션을 `useActionState`로 감싸면 *첫 번째 인수*로 “이전(또는 현재) State”가 추가됩니다. 따라서 일반적인 폼 액션과 달리, 제출된 폼 데이터는 *두 번째 인수*에서 확인해야 합니다.
276267
277268
```js
278269
function action(currentState, formData) {

0 commit comments

Comments
 (0)