Skip to content

Commit 2b841f2

Browse files
i18n(ko-KR): update react.mdx (withastro#12427)
Co-authored-by: Yan <[email protected]>
1 parent 8f9f630 commit 2b841f2

File tree

1 file changed

+13
-13
lines changed
  • src/content/docs/ko/guides/integrations-guide

1 file changed

+13
-13
lines changed

src/content/docs/ko/guides/integrations-guide/react.mdx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -115,30 +115,30 @@ Astro에서 첫 번째 React 컴포넌트를 사용하려면 [UI 프레임워크
115115
* 💧 클라이언트 측 하이드레이션 옵션
116116
* 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회
117117

118-
## `useActionState()`를 사용하여 액션 통합하기(실험적)
118+
## `useActionState()`를 사용하여 액션 통합하기
119119

120-
`@astrojs/react` 통합은 [Astro 액션][astro-actions]과 함께 사용할 수 있는 두 가지 실험적 함수인 `experimental_withState()``experimental_getActionState()`를 제공합니다.
120+
`@astrojs/react` 통합은 [Astro 액션][astro-actions]과 함께 사용할 수 있는 두 가지 함수인 `withState()``getActionState()`를 제공합니다.
121121

122122
이 함수들은 [React의 useActionState() 훅](https://ko.react.dev/reference/react/useActionState)과 함께 사용되어, 양식을 제출하여 액션을 트리거할 때 클라이언트 측 상태를 읽고 업데이트합니다.
123123

124-
### `experimental_withState()`
124+
### `withState()`
125125

126126
<p>
127127

128128
**타입:** `(action: FormFn<T>) => (state: T, formData: FormData) => FormFn<T>`<br />
129-
<Since v="4.3.2" />
129+
<Since v="4.4.0" pkg="@astrojs/react" />
130130
</p>
131131

132-
`experimental_withState()`와 실행하려는 액션을 React의 `useActionState()` 훅에 양식 액션 함수로 전달할 수 있습니다. 다음은 카운터를 증가시키는 `like` 액션과 함께 초기 상태인 좋아요 `0`개를 전달하는 예시입니다.
132+
`withState()`와 실행하려는 액션을 React의 `useActionState()` 훅에 양식 액션 함수로 전달할 수 있습니다. 다음은 카운터를 증가시키는 `like` 액션과 함께 초기 상태인 좋아요 `0`개를 전달하는 예시입니다.
133133

134134
```jsx title="Like.tsx" ins={2,7} "useActionState"
135135
import { actions } from 'astro:actions';
136-
import { experimental_withState } from '@astrojs/react/actions';
136+
import { withState } from '@astrojs/react/actions';
137137
import { useActionState } from "react";
138138

139139
export function Like({ postId }: { postId: string }) {
140140
const [state, action, pending] = useActionState(
141-
experimental_withState(actions.like),
141+
withState(actions.like),
142142
{ data: 0, error: undefined }, // 좋아요 수와 오류의 초깃값
143143
);
144144

@@ -151,32 +151,32 @@ export function Like({ postId }: { postId: string }) {
151151
}
152152
```
153153

154-
`experimental_withState()` 함수는 액션의 타입을 React의 기대값과 일치시킵니다. 이를 통해 점진적 개선에 사용되는 메타데이터를 보존하여, 사용자의 기기에서 JavaScript가 비활성화된 경우에도 작동할 수 있도록 합니다.
154+
`withState()` 함수는 액션의 타입을 React의 기대값과 일치시킵니다. 이를 통해 점진적 개선에 사용되는 메타데이터를 보존하여, 사용자의 기기에서 JavaScript가 비활성화된 경우에도 작동할 수 있도록 합니다.
155155

156-
### `experimental_getActionState()`
156+
### `getActionState()`
157157

158158
<p>
159159

160160
**타입:** `(context: ActionAPIContext) => Promise<T>`<br />
161-
<Since v="4.3.2" />
161+
<Since v="4.4.0" pkg="@astrojs/react" />
162162
</p>
163163

164-
액션의 `handler`에서 `experimental_getActionState()`를 사용하여 서버에서 `useActionState()`로 저장한 상태에 접근할 수 있습니다. 이 함수는 [Astro API 컨텍스트](/ko/reference/api-reference/#컨텍스트-객체)를 인수로 받으며, 선택적으로 결과에 타입을 적용할 수 있습니다.
164+
액션의 `handler`에서 `getActionState()`를 사용하여 서버에서 `useActionState()`로 저장한 상태에 접근할 수 있습니다. 이 함수는 [Astro API 컨텍스트](/ko/reference/api-reference/#컨텍스트-객체)를 인수로 받으며, 선택적으로 결과에 타입을 적용할 수 있습니다.
165165

166166
다음은 카운터에서 숫자 타입의 현재 좋아요 수를 가져와 이를 증가시키는 `like` 액션을 생성하는 예시입니다.
167167

168168
```ts title="actions.ts" ins={3,11}
169169
import { defineAction, type SafeResult } from 'astro:actions';
170170
import { z } from 'astro:schema';
171-
import { experimental_getActionState } from '@astrojs/react/actions';
171+
import { getActionState } from '@astrojs/react/actions';
172172

173173
export const server = {
174174
like: defineAction({
175175
input: z.object({
176176
postId: z.string(),
177177
}),
178178
handler: async ({ postId }, ctx) => {
179-
const { data: currentLikes = 0, error } = await experimental_getActionState<SafeResult<any, number>>(ctx);
179+
const { data: currentLikes = 0, error } = await getActionState<SafeResult<any, number>>(ctx);
180180

181181
// 오류 처리
182182
if (error) throw error;

0 commit comments

Comments
 (0)