@@ -115,30 +115,30 @@ Astro에서 첫 번째 React 컴포넌트를 사용하려면 [UI 프레임워크
115
115
* 💧 클라이언트 측 하이드레이션 옵션
116
116
* 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회
117
117
118
- ## ` useActionState() ` 를 사용하여 액션 통합하기(실험적)
118
+ ## ` useActionState() ` 를 사용하여 액션 통합하기
119
119
120
- ` @astrojs/react ` 통합은 [ Astro 액션] [ astro-actions ] 과 함께 사용할 수 있는 두 가지 실험적 함수인 ` experimental_withState ()` 와 ` experimental_getActionState ()` 를 제공합니다.
120
+ ` @astrojs/react ` 통합은 [ Astro 액션] [ astro-actions ] 과 함께 사용할 수 있는 두 가지 함수인 ` withState ()` 와 ` getActionState ()` 를 제공합니다.
121
121
122
122
이 함수들은 [ React의 useActionState() 훅] ( https://ko.react.dev/reference/react/useActionState ) 과 함께 사용되어, 양식을 제출하여 액션을 트리거할 때 클라이언트 측 상태를 읽고 업데이트합니다.
123
123
124
- ### ` experimental_withState ()`
124
+ ### ` withState ()`
125
125
126
126
<p >
127
127
128
128
** 타입:** ` (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 " />
130
130
</p >
131
131
132
- ` experimental_withState ()` 와 실행하려는 액션을 React의 ` useActionState() ` 훅에 양식 액션 함수로 전달할 수 있습니다. 다음은 카운터를 증가시키는 ` like ` 액션과 함께 초기 상태인 좋아요 ` 0 ` 개를 전달하는 예시입니다.
132
+ ` withState ()` 와 실행하려는 액션을 React의 ` useActionState() ` 훅에 양식 액션 함수로 전달할 수 있습니다. 다음은 카운터를 증가시키는 ` like ` 액션과 함께 초기 상태인 좋아요 ` 0 ` 개를 전달하는 예시입니다.
133
133
134
134
``` jsx title="Like.tsx" ins={2,7} "useActionState"
135
135
import { actions } from ' astro:actions' ;
136
- import { experimental_withState } from ' @astrojs/react/actions' ;
136
+ import { withState } from ' @astrojs/react/actions' ;
137
137
import { useActionState } from " react" ;
138
138
139
139
export function Like ({ postId }: { postId: string }) {
140
140
const [state , action , pending ] = useActionState (
141
- experimental_withState (actions .like ),
141
+ withState (actions .like ),
142
142
{ data: 0 , error: undefined }, // 좋아요 수와 오류의 초깃값
143
143
);
144
144
@@ -151,32 +151,32 @@ export function Like({ postId }: { postId: string }) {
151
151
}
152
152
```
153
153
154
- ` experimental_withState ()` 함수는 액션의 타입을 React의 기대값과 일치시킵니다. 이를 통해 점진적 개선에 사용되는 메타데이터를 보존하여, 사용자의 기기에서 JavaScript가 비활성화된 경우에도 작동할 수 있도록 합니다.
154
+ ` withState ()` 함수는 액션의 타입을 React의 기대값과 일치시킵니다. 이를 통해 점진적 개선에 사용되는 메타데이터를 보존하여, 사용자의 기기에서 JavaScript가 비활성화된 경우에도 작동할 수 있도록 합니다.
155
155
156
- ### ` experimental_getActionState ()`
156
+ ### ` getActionState ()`
157
157
158
158
<p >
159
159
160
160
** 타입:** ` (context: ActionAPIContext) => Promise<T> ` <br />
161
- <Since v = " 4.3.2 " />
161
+ <Since v = " 4.4.0 " pkg = " @astrojs/react " />
162
162
</p >
163
163
164
- 액션의 ` handler ` 에서 ` experimental_getActionState ()` 를 사용하여 서버에서 ` useActionState() ` 로 저장한 상태에 접근할 수 있습니다. 이 함수는 [ Astro API 컨텍스트] ( /ko/reference/api-reference/#컨텍스트-객체 ) 를 인수로 받으며, 선택적으로 결과에 타입을 적용할 수 있습니다.
164
+ 액션의 ` handler ` 에서 ` getActionState ()` 를 사용하여 서버에서 ` useActionState() ` 로 저장한 상태에 접근할 수 있습니다. 이 함수는 [ Astro API 컨텍스트] ( /ko/reference/api-reference/#컨텍스트-객체 ) 를 인수로 받으며, 선택적으로 결과에 타입을 적용할 수 있습니다.
165
165
166
166
다음은 카운터에서 숫자 타입의 현재 좋아요 수를 가져와 이를 증가시키는 ` like ` 액션을 생성하는 예시입니다.
167
167
168
168
``` ts title="actions.ts" ins={3,11}
169
169
import { defineAction , type SafeResult } from ' astro:actions' ;
170
170
import { z } from ' astro:schema' ;
171
- import { experimental_getActionState } from ' @astrojs/react/actions' ;
171
+ import { getActionState } from ' @astrojs/react/actions' ;
172
172
173
173
export const server = {
174
174
like: defineAction ({
175
175
input: z .object ({
176
176
postId: z .string (),
177
177
}),
178
178
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 );
180
180
181
181
// 오류 처리
182
182
if (error ) throw error ;
0 commit comments