(instance = current)} />
+
{instance = current}} />
```
-The original code returned the instance of the `HTMLDivElement` and TypeScript wouldn't know if this was supposed to be a cleanup function or not.
+예전에는 `HTMLDivElement` 인스턴스를 반환하는 코드가 있었는데 TypeScript는 그것이 정리 함수인지 단순 반환 값인지 구분할 수 없었습니다.
-### `useRef` requires an argument {/*useref-requires-argument*/}
+### `useRef`는 인자가 필요함 {/*useref-requires-argument*/}
-_This change is included in the `react-19` codemod preset as [`refobject-defaults`](https://github.com/eps1lon/types-react-codemod/#refobject-defaults)._
+_이 변경 사항은 `react-19` codemod 프리셋에 포함된 [`refobject-defaults`](https://github.com/eps1lon/types-react-codemod/#refobject-defaults) 항목에 해당합니다._
-A long-time complaint of how TypeScript and React work has been `useRef`. We've changed the types so that `useRef` now requires an argument. This significantly simplifies its type signature. It'll now behave more like `createContext`.
+오랫동안 제기되어 온 TypeScript와 React의 불편한 점 중 하나가 `useRef`였습니다. React 19에서는 타입 정의가 변경되어, 이제 `useRef`는 반드시 인자를 받아야 합니다. 이에 따라 타입 시그니처가 훨씬 단순해졌으며, 이제는 `createContext`와 더 유사하게 동작합니다.
```ts
// @ts-expect-error: Expected 1 argument but saw none
@@ -630,16 +630,16 @@ createContext();
createContext(undefined);
```
-This now also means that all refs are mutable. You'll no longer hit the issue where you can't mutate a ref because you initialised it with `null`:
+이제 모든 ref는 변경 가능Mutable합니다. 즉, `null`로 초기화했기 때문에 `ref.current`를 변경할 수 없었던 기존 문제를 더 이상 겪지 않아도 됩니다.
```ts
const ref = useRef(null);
-// Cannot assign to 'current' because it is a read-only property
+// 읽기 전용이라 'current'에 할당 불가
ref.current = 1;
```
-`MutableRef` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
+`MutableRef`는 이제 사용 중단되었으며 `useRef`는 항상 단일 `RefObject` 타입을 반환합니다.
```ts
interface RefObject {
@@ -649,36 +649,36 @@ interface RefObject {
declare function useRef: RefObject
```
-`useRef` still has a convenience overload for `useRef(null)` that automatically returns `RefObject`. To ease migration due to the required argument for `useRef`, a convenience overload for `useRef(undefined)` was added that automatically returns `RefObject`.
+`useRef`는 여전히 `useRef(null)`을 사용할 때 자동으로 `RefObject`을 반환하는 오버로드를 편의상 제공합니다. `useRef`에 인자가 필요하도록 변경됨에 따라 마이그레이션을 쉽게 하려고 `useRef(undefined)`를 사용할 경우 자동으로 `RefObject`를 반환하는 오버로드가 편의상 추가되었습니다.
-Check out [[RFC] Make all refs mutable](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64772) for prior discussions about this change.
+이 변경에 대한 이전 논의는 [[RFC] 모든 ref를 변경할 수 있게 만들기](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64772)에서 확인하실 수 있습니다.
-### Changes to the `ReactElement` TypeScript type {/*changes-to-the-reactelement-typescript-type*/}
+### `ReactElement` TypeScript 타입의 변경 사항 {/*changes-to-the-reactelement-typescript-type*/}
-_This change is included in the [`react-element-default-any-props`](https://github.com/eps1lon/types-react-codemod#react-element-default-any-props) codemod._
+_이 변경사항은 [`react-element-default-any-props`](https://github.com/eps1lon/types-react-codemod#react-element-default-any-props) codemod에 포함되어 있습니다._
-The `props` of React elements now default to `unknown` instead of `any` if the element is typed as `ReactElement`. This does not affect you if you pass a type argument to `ReactElement`:
+`ReactElement`로 타입이 지정된 요소의 `props` 기본 타입이 `any`에서 `unknown`으로 변경되었습니다. 단, `ReactElement`에 타입 인자를 명시적으로 제공할 때 영향을 받지 않습니다.
```ts
type Example2 = ReactElement<{ id: string }>["props"];
// ^? { id: string }
```
-But if you relied on the default, you now have to handle `unknown`:
+하지만 이전에 기본값을 사용하였으면 `unknown`을 처리해야 합니다.
```ts
type Example = ReactElement["props"];
// ^? Before, was 'any', now 'unknown'
```
-You should only need it if you have a lot of legacy code relying on unsound access of element props. Element introspection only exists as an escape hatch, and you should make it explicit that your props access is unsound via an explicit `any`.
+이 변경은 주로 `element.props`에 대한 불안정한 접근을 많이 사용한 레거시 코드에 영향을 줍니다. 요소 내부 속성 접근Element Introspection은 예외적인 경우에만 사용되어야 하며, `any`를 명시적으로 사용해 타입 안정성이 없음을 드러내는 것이 좋습니다.
-### The JSX namespace in TypeScript {/*the-jsx-namespace-in-typescript*/}
-This change is included in the `react-19` codemod preset as [`scoped-jsx`](https://github.com/eps1lon/types-react-codemod#scoped-jsx)
+### TypeScript의 JSX 네임스페이스 변경 {/*the-jsx-namespace-in-typescript*/}
+이 변경은 `react-19` codemod preset의 [`scoped-jsx`](https://github.com/eps1lon/types-react-codemod#scoped-jsx)항목에 포함되어 있습니다.
-A long-time request is to remove the global `JSX` namespace from our types in favor of `React.JSX`. This helps prevent pollution of global types which prevents conflicts between different UI libraries that leverage JSX.
+오랫동안 요청된 기능 중 하나는 전역 `JSX` 네임스페이스를 제거하고 `React.JSX`로 대체하는 것이었습니다. 이 변경은 JSX를 사용하는 다양한 UI 라이브러리 간의 타입 충돌을 방지하기 위해 글로벌 타입 오염을 줄이는 데 도움이 됩니다.
-You'll now need to wrap module augmentation of the JSX namespace in `declare module "....":
+이제 JSX 네임스페이스 확장은 다음처럼 `declare module "...."을 통해 감싸야 합니다.
```diff
// global.d.ts
@@ -693,62 +693,62 @@ You'll now need to wrap module augmentation of the JSX namespace in `declare mod
+ }
```
-The exact module specifier depends on the JSX runtime you specified in the `compilerOptions` of your `tsconfig.json`:
+`tsconfig.json`의 `compilerOptions`에서 지정한 JSX 런타임 설정에 따라 정확한 모듈 명세자는 다음과 같이 달라집니다.
-- For `"jsx": "react-jsx"` it would be `react/jsx-runtime`.
-- For `"jsx": "react-jsxdev"` it would be `react/jsx-dev-runtime`.
-- For `"jsx": "react"` and `"jsx": "preserve"` it would be `react`.
+- `"jsx": "react-jsx"` 인 경우 `react/jsx-runtime`.
+- `"jsx": "react-jsxdev"` 인 경우 `react/jsx-dev-runtime`.
+- `"jsx": "react"` 또는 `"jsx": "preserve"` 인 경우 `react`.
-### Better `useReducer` typings {/*better-usereducer-typings*/}
+### `useReducer` 타입 추론 개선 {/*better-usereducer-typings*/}
-`useReducer` now has improved type inference thanks to [@mfp22](https://github.com/mfp22).
+[@mfp22](https://github.com/mfp22) 덕분에 이제 `useReducer`의 타입 추론이 개선되었습니다.
-However, this required a breaking change where `useReducer` doesn't accept the full reducer type as a type parameter but instead either needs none (and rely on contextual typing) or needs both the state and action type.
+하지만 이에 따라 호환성 깨짐이 발생했는데, 이제 `useReducer`는 전체 reducer 타입을 타입 인자로 받지 않고 아예 타입 인자를 생략하거나 state와 action 타입을 둘 다 지정해야 합니다.
-The new best practice is _not_ to pass type arguments to `useReducer`.
+새로운 권장 방식은 타입 인자를 `useReducer`에 넘기지 _않는_ 것입니다.
```diff
- useReducer>(reducer)
+ useReducer(reducer)
```
-This may not work in edge cases where you can explicitly type the state and action, by passing in the `Action` in a tuple:
+하지만 특수한 경우에는 `Action`을 튜플로 전달하여 state와 action을 명시적으로 지정해야 할 수도 있습니다.
```diff
- useReducer>(reducer)
+ useReducer(reducer)
```
-If you define the reducer inline, we encourage to annotate the function parameters instead:
+reducer를 인라인으로 정의한다면 함수 매개변수에 타입을 지정하는 방식을 권장합니다.
```diff
- useReducer>((state, action) => state)
+ useReducer((state: State, action: Action) => state)
```
-This is also what you'd also have to do if you move the reducer outside of the `useReducer` call:
+이는 `useReducer` 호출문 밖으로 reducer를 분리할 때도 동일하게 적용됩니다.
```ts
const reducer = (state: State, action: Action) => state;
```
-## Changelog {/*changelog*/}
+## 변경 로그 {/*changelog*/}
-### Other breaking changes {/*other-breaking-changes*/}
+### 기타 주요한 변경 사항 {/*other-breaking-changes*/}
-- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507)
-- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
-- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
-- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
-- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
-- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
-- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224)
+- **react-dom**: `src` 및 `href` 속성에 JavaScript URL 사용 시 발생하던 오류 [#26507](https://github.com/facebook/react/pull/26507)
+- **react-dom**: `onRecoverableError`에서 `errorInfo.digest` 제거 [#28222](https://github.com/facebook/react/pull/28222)
+- **react-dom**: `unstable_flushControlled` 제거 [#26397](https://github.com/facebook/react/pull/26397)
+- **react-dom**: `unstable_createEventHandle` 제거 [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: `unstable_renderSubtreeIntoContainer` 제거 [#28271](https://github.com/facebook/react/pull/28271)
+- **react-dom**: `unstable_runWithPriority` 제거 [#28271](https://github.com/facebook/react/pull/28271)
+- **react-is**: `react-is`에서 사용 중단된 메서드 제거 [28224](https://github.com/facebook/react/pull/28224)
-### Other notable changes {/*other-notable-changes*/}
+### 기타 주목할 만한 변경 사항 {/*other-notable-changes*/}
-- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/facebook/react/pull/25700)
-- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/facebook/react/pull/26380)
-- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/facebook/react/pull/26625)
-- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/facebook/react/pull/26025)
-- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/facebook/react/pull/26395)
-- **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/facebook/react/pull/28124)
+- **react**: 동기, 기본, 지속적 lane 처리 배치 적용 [#25700](https://github.com/facebook/react/pull/25700)
+- **react**: 중단된 컴포넌트의 형제 요소 선렌더링 방지 [#26380](https://github.com/facebook/react/pull/26380)
+- **react**: 렌더 단계에서의 업데이트로 인해 발생하는 무한 루프 감지 [#26625](https://github.com/facebook/react/pull/26625)
+- **react-dom**: popstate에서의 전환을 이제 동기적으로 처리 [#26025](https://github.com/facebook/react/pull/26025)
+- **react-dom**: SSR 중 layout effect 경고 제거 [#26395](https://github.com/facebook/react/pull/26395)
+- **react-dom**: src나 href에 빈 문자열 설정 시 경고 및 무시 (단, a 태그 제외) [#28124](https://github.com/facebook/react/pull/28124)
-For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024).
+전체 변경 사항은 [변경 로그 전체 보기](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024)를 참고하세요.
---
-Thanks to [Andrew Clark](https://twitter.com/acdlite), [Eli White](https://twitter.com/Eli_White), [Jack Pope](https://github.com/jackpope), [Jan Kassens](https://github.com/kassens), [Josh Story](https://twitter.com/joshcstory), [Matt Carroll](https://twitter.com/mattcarrollcode), [Noah Lemen](https://twitter.com/noahlemen), [Sophie Alpert](https://twitter.com/sophiebits), and [Sebastian Silbermann](https://twitter.com/sebsilbermann) for reviewing and editing this post.
+이 글을 작성하는 데에 도움을 준 모든 분들께 감사드립니다. [Andrew Clark](https://twitter.com/acdlite), [Eli White](https://twitter.com/Eli_White), [Jack Pope](https://github.com/jackpope), [Jan Kassens](https://github.com/kassens), [Josh Story](https://twitter.com/joshcstory), [Matt Carroll](https://twitter.com/mattcarrollcode), [Noah Lemen](https://twitter.com/noahlemen), [Sophie Alpert](https://twitter.com/sophiebits), [Sebastian Silbermann](https://twitter.com/sebsilbermann)
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 7d94b2752..c042c64df 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -16,7 +16,7 @@ React Labs 게시글에서는 현재 연구 개발 중인 프로젝트에 대한
-
+
컴파일러의 첫 번째 릴리즈 후보(Release Candidate, RC)를 공개합니다.
@@ -46,9 +46,9 @@ We announced an experimental release of React Compiler at React Conf 2024. We've
-
+
-The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 ...
+React 19에 추가된 개선 사항들로 인해 일부 주요한 변경 사항Breaking Changes이 있지만, 업그레이드를 가능한 원활하게 진행할 수 있도록 노력했으며 대부분의 앱에 큰 영향이 없을 것으로 예상합니다. 이 글에서는 앱과 라이브러리를 React 19로 업그레이드하는 단계를 안내합니다.
diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
index c0de8d8ac..662fab0d3 100644
--- a/src/content/learn/reacting-to-input-with-state.md
+++ b/src/content/learn/reacting-to-input-with-state.md
@@ -391,9 +391,9 @@ const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 's
-#### Reducer를 사용하여 "불가능한" state 제거 {/*eliminating-impossible-states-with-a-reducer*/}
+#### Reducer를 사용하여 "불가능한" State 제거 {/*eliminating-impossible-states-with-a-reducer*/}
-여기 폼의 state를 나타내는데 충분한 세 가지 변수가 있습니다. 하지만 세 변수는 여전히 말이 안 되는 일부 중간 state를 가지고 있습니다. 예를 들면 `error`가 null이 아닌데 `status`가 `success`인 것은 말이 되지 않습니다. state를 조금 더 정확하게 모델링하기 위해서는 [리듀서로 분리](/learn/extracting-state-logic-into-a-reducer)하는 방법도 있습니다. 리듀서를 사용하면 여러 state 변수를 하나의 객체로 통합하고 관련된 모든 로직도 합칠 수 있습니다!
+여기 폼의 State를 나타내는데 충분한 세 가지 변수가 있습니다. 하지만 세 변수는 여전히 말이 안 되는 일부 중간 State를 가지고 있습니다. 예를 들면 `error`가 `null`이 아닌데 `status`가 `success`인 것은 말이 되지 않습니다. State를 조금 더 정확하게 모델링하기 위해서는 [Reducer로 분리](/learn/extracting-state-logic-into-a-reducer)하는 방법도 있습니다. Reducer를 사용하면 여러 State 변수를 하나의 객체로 통합하고 관련된 모든 로직도 합칠 수 있습니다!
diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md
index c73f72ad7..71c3b3ee9 100644
--- a/src/content/reference/react/useReducer.md
+++ b/src/content/reference/react/useReducer.md
@@ -38,9 +38,9 @@ function MyComponent() {
#### 매개변수 {/*parameters*/}
-* `reducer`: state가 어떻게 업데이트 되는지 지정하는 리듀서 함수입니다. 리듀서 함수는 반드시 순수 함수여야 하며, state와 action을 인수로 받아야 하고, 다음 state를 반환해야 합니다. state와 action에는 모든 데이터 타입이 할당될 수 있습니다.
-* `initialArg`: 초기 state가 계산되는 값입니다. 모든 데이터 타입이 할당될 수 있습니다. 초기 state가 어떻게 계산되는지는 다음 `init` 인수에 따라 달라집니다.
-* **선택사항** `init`: 초기 state를 반환하는 초기화 함수입니다. 이 함수가 인수에 할당되지 않으면 초기 state는 `initialArg`로 설정됩니다. 할당되었다면 초기 state는 `init(initialArg)`를 호출한 결과가 할당됩니다.
+* `reducer`: state가 어떻게 업데이트 되는지 지정하는 Reducer 함수입니다. Reducer 함수는 반드시 순수 함수여야 하며, State와 Action을 인수로 받아야 하고, 다음 State를 반환해야 합니다. State와 Action에는 모든 데이터 타입이 할당될 수 있습니다.
+* `initialArg`: 초기 State가 계산되는 값입니다. 모든 데이터 타입이 할당될 수 있습니다. 초기 State가 어떻게 계산되는지는 다음 `init` 인수에 따라 달라집니다.
+* **선택사항** `init`: 초기 State를 반환하는 초기화 함수입니다. 이 함수가 인수에 할당되지 않으면 초기 State는 `initialArg`로 설정됩니다. 할당되었다면 초기 State는 `init(initialArg)`를 호출한 결과가 할당됩니다.
#### 반환값 {/*returns*/}
@@ -320,7 +320,7 @@ button { display: block; margin-top: 10px; }
#### 투두 리스트 (배열) {/*todo-list-array*/}
-이 예시에서는 리듀서를 이용해 할 일 목록들을 배열로 관리합니다. 배열의 업데이트는 [mutation이 없이](/learn/updating-arrays-in-state) 이루어져야 합니다.
+이 예시에서는 Reducer를 이용해 할 일 목록들을 배열로 관리합니다. 배열의 업데이트는 [Mutation이 없이](/learn/updating-arrays-in-state) 이루어져야 합니다.
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index aca75a736..088799e4a 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -165,7 +165,7 @@
"path": "/learn/preserving-and-resetting-state"
},
{
- "title": "State 로직을 리듀서로 작성하기",
+ "title": "State 로직을 Reducer로 작성하기",
"path": "/learn/extracting-state-logic-into-a-reducer"
},
{