From ddb9805eac7609ac1d1aa90a382b508dad0622f1 Mon Sep 17 00:00:00 2001 From: bysxx <0415white@gmail.com> Date: Fri, 10 Jan 2025 17:08:04 +0900 Subject: [PATCH 1/2] docs: update useActionState.md --- src/content/reference/react/useActionState.md | 57 +++++++++---------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 30bfb3cea..45a198408 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -4,7 +4,7 @@ title: useActionState -`useActionState`는 폼 액션의 결과를 기반으로 state를 업데이트할 수 있도록 제공하는 Hook 입니다. +`useActionState`는 폼 액션의 결과를 기반으로 state를 업데이트할 수 있도록 제공하는 Hook입니다. ```js const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); @@ -14,11 +14,10 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin -In earlier React Canary versions, this API was part of React DOM and called `useFormState`. +이전 React Canary 버전에서는 이 API가 React DOM에 포함되어 있었고, `useFormState`라고 불렸습니다. - --- @@ -29,7 +28,7 @@ In earlier React Canary versions, this API was part of React DOM and called `use {/* TODO T164397693: link to actions documentation once it exists */} -컴포넌트 최상위 레벨에서 `useActionState`를 호출하여 [폼 액션이 실행될 때](/reference/react-dom/components/form) 업데이트되는 컴포넌트 state를 생성합니다. `useActionState`는 기존의 폼 액션 함수와 초기 state를 전달받고, 폼에서 사용할 새로운 액션을 반환합니다. 이와 함께 최신 폼 state와 액션이 여전히 진행(Pending) 중인지 여부도 반환합니다. 최신 폼 State는 제공된 함수에도 전달됩니다. +컴포넌트 함수(또는 최상위 레벨)에서 `useActionState`를 호출하여 [폼 액션이 실행될 때](/reference/react-dom/components/form) 업데이트되는 컴포넌트 state를 생성합니다. `useActionState`는 기존의 폼 액션 함수와 초기 state를 전달받고, 폼에서 사용할 새로운 액션을 반환합니다. 또한 최신 폼 state와 액션이 진행 중인지 여부(`isPending`)도 반환합니다. 이때 최신 폼 state는 `useActionState`에 전달한 함수에도 함께 전달됩니다. ```js import { useActionState } from "react"; @@ -45,13 +44,13 @@ function StatefulForm({}) { {state} - ) + ); } ``` -폼 state는 폼을 마지막으로 제출했을 때 액션에서 반환되는 값입니다. 폼이 제출되기 전이라면 전달한 초기 state와 같습니다. +폼 state는 폼을 마지막으로 제출했을 때 액션에서 반환되는 값입니다. 아직 폼을 제출하지 않았다면, `initialState`로 설정됩니다. -Server Action과 함께 사용하는 경우, `useActionState`를 사용하여 hydration이 완료되기 전에도 폼 제출에 대한 서버의 응답을 보여줄 수 있습니다. +서버 함수(Server Function)와 함께 사용하는 경우, `useActionState`를 통해 하이드레이션(hydration)이 끝나기 전에도 폼 제출에 대한 서버 응답을 표시할 수 있습니다. 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*/} @@ -59,28 +58,28 @@ If used with a Server Function, `useActionState` allows the server's response fr #### 매개변수 {/*parameters*/} -* `fn`: 폼이 제출되거나 버튼을 눌렀을 때 호출될 함수입니다. 함수가 실행될 때, 첫 번째 인수로 폼의 이전 state를 전달합니다. state는 초기에 전달한 `initialState`이고, 이후에는 이전 실행의 반환값입니다. 그 후 일반적으로 폼 액션에 전달하는 인수들이 이어집니다. -* `initialState`: 초기 state로 설정하고자 하는 값으로, 직렬화 할 수 있는 값일 수 있습니다. 액션이 처음 호출된 후에는 이 인수를 무시합니다. -* **optional** `permalink`: 이 폼이 수정하는 고유의 URL이 포함된 문자열입니다. 점진적인 향상과 함께 동적 콘텐츠(예: 피드)가 있는 페이지에서 사용합니다. `fn`이 [서버 액션](/reference/react/use-server)이고 폼이 자바스크립트 번들이 로드되기 전에 제출된다면, 브라우저는 현재의 페이지 URL이 아닌 명시된 `permalink`의 URL로 이동합니다. React가 상태를 전달하는 방법을 알 수 있도록 동일한 폼 컴포넌트가 대상 페이지에 렌더링 되어야 합니다(동일한 액션 `fn` 및 `permalink` 포함). 폼이 hydrated하면 이 매개변수는 아무런 영향을 미치지 않습니다. +* `fn`: 폼이 제출되거나 버튼이 눌렸을 때 호출될 함수입니다. 함수가 호출되면 첫 번째 인수로 폼의 이전 state가 전달됩니다(처음에는 `initialState`, 그 뒤로는 액션의 마지막 반환값). 그 뒤 일반적인 폼 액션과 동일하게 인수들이 이어집니다. +* `initialState`: 초기 state로 사용될 직렬화 가능한 값입니다. 액션이 처음 호출된 뒤에는 더 이상 이 값이 사용되지 않습니다. +* **optional** `permalink`: 점진적 향상(progressive enhancement) 기법을 사용하는 동적 콘텐츠(예: 피드) 페이지에서 유용한 옵션입니다. `fn`이 [서버 함수(Server Function)](/reference/rsc/server-functions)이고, 자바스크립트 번들이 로드되기 전에 폼이 제출된다면 브라우저는 현재 페이지가 아니라 이 `permalink` URL로 이동합니다. React가 상태를 올바르게 이어 받기 위해, 대상 페이지에서도 동일한 폼 컴포넌트를 렌더링해야 합니다(`fn`과 `permalink`가 동일해야 함). 폼이 하이드레이션된 뒤에는 이 매개변수는 더 이상 영향을 주지 않습니다. * `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. * `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. -* **optional** `permalink`: A string containing the unique page URL that this form modifies. For use on pages with dynamic content (eg: 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*/} +* **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*/} {/* TODO T164397693: link to serializable values docs once it exists */} #### 반환값 {/*returns*/} -`useActionState`는 다음 3가지 값들이 포함된 배열을 반환합니다. +`useActionState`는 다음 세 가지 값을 담은 배열을 반환합니다. -1. 현재 state입니다. 첫 번째 렌더링에서는 전달한 `initialState`와 일치합니다. 액션이 실행된 이후에는 액션에서 반환한 값과 일치합니다. -2. `form` 컴포넌트의 `action` prop에 전달하거나 폼 내부 `button` 컴포넌트의 `formAction` prop에 전달할 수 있는 새로운 액션입니다. -3. 대기 중인 전환(Pending Transition)이 있는지 여부를 알려주는 `isPending` 플래그입니다. +1. 현재 state입니다. 첫 렌더링 시에는 `initialState`와 일치하며, 액션이 실행된 후에는 액션이 반환한 값과 일치합니다. +2. `
` 컴포넌트의 `action` prop이나 폼 내부 `