diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index 4e7c0cb77..588b2f071 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -19,7 +19,7 @@ title: React 컴파일러
-React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스로 공개된 새로운 실험적 컴파일러입니다. 아직 안정적이지 않으며 프로덕션 환경에서는 완전히 준비되지 않았습니다.
+React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스로 공개한 새로운 실험적 컴파일러입니다. 아직 안정적이지 않으며 프로덕션 환경에서는 완전히 준비되지 않았습니다.
React 컴파일러는 React 19 RC를 필요로 합니다. React 19로 업그레이드할 수 없는 경우 [워킹 그룹](https://github.com/reactwg/react-compiler/discussions/6)에 설명된 대로 사용자 공간 캐시 함수 구현을 시도해 볼 수 있습니다. 그러나 이 방법은 권장하지 않으며 가능한 한 React 19로 업그레이드하는 것이 좋습니다.
@@ -226,6 +226,29 @@ module.exports = function () {
`babel-plugin-react-compiler`는 다른 Babel 플러그인보다 먼저 실행되어야 합니다. 이는 컴파일러가 사운드 분석(sound analysis)을 위해 입력 소스 정보를 필요로 하기 때문입니다.
+React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
+
+
+npm install react-compiler-runtime@experimental
+
+
+You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
+
+```js {3}
+// babel.config.js
+const ReactCompilerConfig = {
+ target: '18' // '17' | '18' | '19'
+};
+
+module.exports = function () {
+ return {
+ plugins: [
+ ['babel-plugin-react-compiler', ReactCompilerConfig],
+ ],
+ };
+};
+```
+
### Vite {/*usage-with-vite*/}
Vite를 사용하고 있다면, `vite-plugin-react`에 플러그인을 추가할 수 있습니다.
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 8bd37ff17..f24569478 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -20,7 +20,7 @@ React Canary 버전에서 `useActionState` 라고 불리는 이 API 는 React DO
`useActionState`는 폼 액션의 결과를 기반으로 state를 업데이트할 수 있도록 제공하는 Hook 입니다.
```js
-const [state, formAction] = useActionState(fn, initialState, permalink?);
+const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);
```
@@ -35,7 +35,7 @@ const [state, formAction] = useActionState(fn, initialState, permalink?);
{/* TODO T164397693: link to actions documentation once it exists */}
-컴포넌트 최상위 레벨에서 `useActionState`를 호출하여 [폼 액션이 실행될 때](/reference/react-dom/components/form) 업데이트되는 컴포넌트 state를 생성합니다. `useActionState`에 기존의 폼 작업 함수와 초기 state를 전달하면, 최신 폼 state와 함께 폼에서 사용하는 새로운 액션을 반환합니다. 최신 폼 state 또한 제공된 함수에 전달됩니다.
+컴포넌트 최상위 레벨에서 `useActionState`를 호출하여 [폼 액션이 실행될 때](/reference/react-dom/components/form) 업데이트되는 컴포넌트 state를 생성합니다. `useActionState`는 기존의 폼 액션 함수와 초기 state를 전달받고, 폼에서 사용할 새로운 액션을 반환합니다. 이와 함께 최신 폼 state와 액션이 여전히 진행(Pending) 중인지 여부도 반환합니다. 최신 폼 State는 제공된 함수에도 전달됩니다.
```js
import { useActionState } from "react";
@@ -71,10 +71,11 @@ Server Action과 함께 사용하는 경우, `useActionState`를 사용하여 hy
#### 반환값 {/*returns*/}
-`useActionState`는 정확히 두 개의 값이 담긴 배열을 반환합니다.
+`useActionState`는 다음 3가지 값들이 포함된 배열을 반환합니다.
1. 현재 state입니다. 첫 번째 렌더링에서는 전달한 `initialState`와 일치합니다. 액션이 실행된 이후에는 액션에서 반환한 값과 일치합니다.
2. `form` 컴포넌트의 `action` prop에 전달하거나 폼 내부 `button` 컴포넌트의 `formAction` prop에 전달할 수 있는 새로운 액션입니다.
+3. 대기 중인 전환(Pending Transition)이 있는지 여부를 알려주는 `isPending` 플래그입니다.
#### 주의 사항 {/*caveats*/}
@@ -104,10 +105,11 @@ function MyComponent() {
}
```
-`useActionState`는 정확히 두 개의 항목으로 구성된 배열을 반환합니다.
+`useActionState`는 다음 3가지 항목들이 포함된 배열을 반환합니다.
-1. 폼의 현재 state입니다. 처음에는 제공한 초기 state로 설정되며, 폼이 제출된 후에는 전달한 액션의 반환값으로 설정됩니다.
-2. `
);
}
@@ -162,6 +164,10 @@ export async function addToCart(prevState, queryData) {
if (itemID === "1") {
return "Added to cart";
} else {
+ // Add a fake delay to make waiting noticeable.
+ await new Promise(resolve => {
+ setTimeout(resolve, 2000);
+ });
return "Couldn't add to cart: the item is sold out.";
}
}