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. `
`의 `action` prop에 전달할 새로운 action입니다. +1. 폼의 현재 state입니다. 처음에는 전달한 초기 state로 설정되며, 폼이 제출된 후에는 전달한 액션의 반환값으로 설정됩니다. +2. ``의 `action` prop에 전달할 새로운 액션입니다. +3. 액션이 처리되는 동안 사용할 수 있는 대기(Pending) state입니다. 폼을 제출하면 전달한 액션 함수가 호출됩니다. 액션의 반환값은 폼의 새로운 현재 state가 됩니다. @@ -133,13 +135,13 @@ import { useActionState, useState } from "react"; import { addToCart } from "./actions.js"; function AddToCartForm({itemID, itemTitle}) { - const [message, formAction] = useActionState(addToCart, null); + const [message, formAction, isPending] = useActionState(addToCart, null); return (

{itemTitle}

- {message} + {isPending ? "Loading..." : message}
); } @@ -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."; } }