Skip to content

Commit 33c372a

Browse files
committed
Merge branch 'react-docs-translate' of https://github.com/ony540/ko.react.dev into react-docs-translate
2 parents d8f5099 + c6e901f commit 33c372a

File tree

8 files changed

+144
-126
lines changed

8 files changed

+144
-126
lines changed

src/content/blog/2025/04/21/react-compiler-rc.md

Lines changed: 63 additions & 50 deletions
Large diffs are not rendered by default.

src/content/learn/build-a-react-app-from-scratch.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ React 생태계에는 이러한 문제들을 해결하기 위한 많은 도구
9797

9898
대부분의 백엔드나 REST 스타일 API에서 데이터를 가져온다면 다음을 사용할 것을 제안합니다.
9999

100-
- [React Query](https://react-query.tanstack.com/)
100+
- [React Query](https://tanstack.com/query/latest)
101101
- [SWR](https://swr.vercel.app/)
102102
- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
103103

@@ -126,7 +126,7 @@ GraphQL API에서 데이터를 가져온다면 다음을 사용할 것을 제안
126126

127127
* **단일 페이지 앱 (SPA)** 은 단일 HTML 페이지를 로드하고 사용자가 앱과 상호작용을 할 때 페이지를 동적으로 업데이트합니다. SPA는 시작하기는 더 쉽지만, 초기 로드 시간이 느릴 수 있습니다. SPA는 대부분의 빌드 도구에서 기본 아키텍처입니다.
128128

129-
* **스트리밍 서버 측 렌더링(SSR)** 은 서버에서 페이지를 렌더링하고 완전히 렌더링 된 페이지를 클라이언트로 보냅니다. SSR은 성능을 향상할 수 있지만, 단일 페이지 앱보다 설정하고 유지 관리하는 것이 더 복잡할 수 있습니다. 스트리밍 기능이 추가되면서 SSR은 설정 및 유지 관리가 매우 복잡해질 수 있습니다. Vite의 SSR 가이드를 참조하세요.
129+
* **스트리밍 서버 측 렌더링(SSR)** 은 서버에서 페이지를 렌더링하고 완전히 렌더링 된 페이지를 클라이언트로 보냅니다. SSR은 성능을 향상할 수 있지만, 단일 페이지 앱보다 설정하고 유지 관리하는 것이 더 복잡할 수 있습니다. 스트리밍 기능이 추가되면서 SSR은 설정 및 유지 관리가 매우 복잡해질 수 있습니다. [Vite의 SSR 가이드](https://vite.dev/guide/ssr.html) 참조하세요.
130130

131131
* **정적 사이트 생성(SSG)** 은 빌드 시점에 앱에 대한 정적 HTML 파일을 생성합니다. SSG는 성능을 향상할 수 있지만, 서버 측 렌더링보다 설정하고 유지 관리하는 것이 더 복잡할 수 있습니다. [Vite의 SSG 가이드](https://vite.dev/guide/ssr.html#pre-rendering-ssg)를 참조하세요.
132132

src/content/learn/queueing-a-series-of-state-updates.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
255255

256256
```js
257257
setEnabled(e => !e);
258-
setLastName(ln => ln.reverse());
258+
setLastName(ln => ln.toUpperCase());
259259
setFriendCount(fc => fc * 2);
260260
```
261261

src/content/reference/react-dom/components/form.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ export async function deliverMessage(message) {
232232

233233
</Sandpack>
234234

235-
`useOptimistic` Hook에 대해 더 알고 싶다면 [참고 문서](/reference/react/hooks/useOptimistic)를 확인하세요.
235+
`useOptimistic` Hook에 대해 더 알고 싶다면 [참고 문서](/reference/react/useOptimistic)를 확인하세요.
236236

237237
### 폼 제출 오류 처리하기 {/*handling-form-submission-errors*/}
238238

src/content/reference/react-dom/server/renderToString.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,4 +149,5 @@ console.log(div.innerHTML); // 예를 들어, "<svg>...</svg>"
149149
150150
일부 컴포넌트가 일시 중단<sup>Suspend</sup>되거나 (예를 들어, [`lazy`](/reference/react/lazy)와 함께 정의되거나 데이터를 가져올 때) `renderToString`은 콘텐츠가 해결될 때까지 기다리지 않습니다. `renderToString`는 그 위에 가장 가까운 [`<Suspense>`](/reference/react/Suspense) 경계를 찾아 `fallback` 프로퍼티를 HTML에 렌더링합니다. 내용<sup>Content</sup>은 클라이언트 코드가 로드될 때까지 나타나지 않습니다.
151151
152-
To solve this, use one of the [recommended streaming solutions](#alternatives). For server side rendering, they can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. For static site generation, they can wait for all the content to resolve before generating the static HTML.
152+
이를 해결하려면 [권장되는 스트리밍 솔루션](#alternatives) 중 하나를 사용하면 좋습니다. 서버 사이드 렌더링의 경우, 서버에서 해결되는 대로 콘텐츠를 작은 단위<sup>chunk</sup>로 스트리밍할 수 있어 클라이언트 코드가 로드되기 전에 사용자가 페이지가 단계적으로 나타나는 것을 볼 수 있습니다. 정적 사이트 생성의 경우, 정적 HTML을 생성하기 전에 모든 콘텐츠가 해결될 때까지 기다릴 수 있습니다.
153+

src/content/reference/react/addTransitionType.md

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@ version: experimental
55

66
<Experimental>
77

8-
**This API is experimental and is not available in a stable version of React yet.**
8+
**이 API는 실험적이며 React 안정 버전에서는 아직 사용할 수 없습니다.**
99

10-
You can try it by upgrading React packages to the most recent experimental version:
10+
이 API를 사용하려면 React 패키지를 가장 최신의 실험적인 버전으로 업그레이드해야 합니다.
1111

1212
- `react@experimental`
1313
- `react-dom@experimental`
1414
- `eslint-plugin-react-hooks@experimental`
1515

16-
Experimental versions of React may contain bugs. Don't use them in production.
16+
실험적인 버전의 React에는 버그가 있을 수 있습니다. 프로덕션 환경에서는 사용하지 마세요.
1717

1818
</Experimental>
1919

2020
<Intro>
2121

22-
`unstable_addTransitionType` lets you specify the cause of a transition.
22+
`unstable_addTransitionType`을 사용하면 트랜지션이 발생한 원인을 상세히 나타낼 수 있습니다.
2323

2424

2525
```js
@@ -35,30 +35,30 @@ startTransition(() => {
3535

3636
---
3737

38-
## Reference {/*reference*/}
38+
## 레퍼런스 {/*reference*/}
3939

4040
### `addTransitionType` {/*addtransitiontype*/}
4141

42-
#### Parameters {/*parameters*/}
42+
#### 매개변수 {/*parameters*/}
4343

44-
- `type`: The type of transition to add. This can be any string.
44+
- `type`: 추가할 트랜지션의 타입입니다. 어떤 문자열이든 될 수 있습니다.
4545

46-
#### Returns {/*returns*/}
46+
#### 반환값 {/*returns*/}
4747

48-
`startTransition` does not return anything.
48+
`startTransition`은 아무것도 반환하지 않습니다.
4949

50-
#### Caveats {/*caveats*/}
50+
#### 주의 사항 {/*caveats*/}
5151

52-
- If multiple transitions are combined, all Transition Types are collected. You can also add more than one type to a Transition.
53-
- Transition Types are reset after each commit. This means a `<Suspense>` fallback will associate the types after a `startTransition`, but revealing the content does not.
52+
- 여러 트랜지션이 결합되면 모든 트랜지션 타입이 수집됩니다. 하나의 트랜지션에 두 개 이상의 타입을 추가할 수도 있습니다.
53+
- 트랜지션 타입은 커밋마다 초기화됩니다. 즉, `<Suspense>`의 Fallback은 `startTransition` 이후 타입을 연결하며, 내용이 나타날 때는 그렇지 않습니다.
5454

5555
---
5656

57-
## Usage {/*usage*/}
57+
## 사용법 {/*usage*/}
5858

59-
### Adding the cause of a transition {/*adding-the-cause-of-a-transition*/}
59+
### 트랜지션의 원인 추가하기 {/*adding-the-cause-of-a-transition*/}
6060

61-
Call `addTransitionType` inside of `startTransition` to indicate the cause of a transition:
61+
트랜지션의 원인을 나타내기 위해 `startTransition` 내부에서 `addTransitionType`을 호출합니다
6262

6363
``` [[1, 6, "unstable_addTransitionType"], [2, 5, "startTransition", [3, 6, "'submit-click'"]]
6464
import { startTransition, unstable_addTransitionType } from 'react';
@@ -76,22 +76,22 @@ function Submit({action) {
7676
7777
```
7878

79-
When you call <CodeStep step={1}>addTransitionType</CodeStep> inside the scope of <CodeStep step={2}>startTransition</CodeStep>, React will associate <CodeStep step={3}>submit-click</CodeStep> as one of the causes for the Transition.
79+
<CodeStep step={1}>addTransitionType</CodeStep><CodeStep step={2}>startTransition</CodeStep>의 범위 내에서 호출하면, React는 해당 트랜지션에 <CodeStep step={3}>submit-click</CodeStep>을 원인으로 연결합니다.
8080

81-
Currently, Transition Types can be used to customize different animations based on what caused the Transition. You have three different ways to choose from for how to use them:
81+
현재 트랜지션 타입은 원인에 따라 서로 다른 애니메이션을 커스터마이즈하는 데 사용할 수 있습니다. 사용할 수 있는 방식은 세 가지입니다.
8282

83-
- [Customize animations using browser view transition types](#customize-animations-using-browser-view-transition-types)
84-
- [Customize animations using `View Transition` Class](#customize-animations-using-view-transition-class)
85-
- [Customize animations using `ViewTransition` events](#customize-animations-using-viewtransition-events)
83+
- [브라우저 View Transition 타입으로 애니메이션 커스텀하기](#customize-animations-using-browser-view-transition-types)
84+
- [`View Transition` 클래스로 애니메이션 커스텀하기](#customize-animations-using-view-transition-class)
85+
- [`ViewTransition`이벤트로 애니메이션 커스텀하기](#customize-animations-using-viewtransition-events)
8686

87-
In the future, we plan to support more use cases for using the cause of a transition.
87+
향후에는 트랜지션의 원인을 활용할 수 있는 다양한 용례를 지원할 예정입니다.
8888

8989
---
90-
### Customize animations using browser view transition types {/*customize-animations-using-browser-view-transition-types*/}
90+
### 브라우저 View Transition 타입으로 애니메이션 커스텀하기 {/*customize-animations-using-browser-view-transition-types*/}
9191

92-
When a [`ViewTransition`](/reference/react/ViewTransition) activates from a transition, React adds all the Transition Types as browser [view transition types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples) to the element.
92+
트랜지션에서 [`ViewTransition`](/reference/react/ViewTransition)이 활성화되면, React는 모든 트랜지션 타입을 브라우저의 [View Transition Types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples)으로 해당 요소에 추가합니다.
9393

94-
This allows you to customize different animations based on CSS scopes:
94+
이렇게 하면 CSS 범위에서 다른 애니메이션을 커스텀할 수 있습니다.
9595

9696
```js [11]
9797
function Component() {
@@ -118,9 +118,9 @@ startTransition(() => {
118118

119119
---
120120

121-
### Customize animations using `View Transition` Class {/*customize-animations-using-view-transition-class*/}
121+
### `View Transition` 클래스로 애니메이션 커스텀하기 {/*customize-animations-using-view-transition-class*/}
122122

123-
You can customize animations for an activated `ViewTransition` based on type by passing an object to the View Transition Class:
123+
활성화된 `ViewTransition`에서 타입에 따라 애니메이션을 커스터마이즈하려면, View Transition 클래스에 객체를 전달하면 됩니다.
124124

125125
```js
126126
function Component() {
@@ -140,9 +140,9 @@ startTransition(() => {
140140
});
141141
```
142142

143-
If multiple types match, then they're joined together. If no types match then the special "default" entry is used instead. If any type has the value "none" then that wins and the ViewTransition is disabled (not assigned a name).
143+
여러 타입이 매칭되면 값들이 결합됩니다. 매칭되는 타입이 없으면 "default" 엔트리가 사용됩니다. 어떤 타입이라도 값이 "none"이면 해당 값이 우선하며 `ViewTransition`은 비활성화됩니다. (이름이 할당되지 않습니다).
144144

145-
These can be combined with enter/exit/update/layout/share props to match based on kind of trigger and Transition Type.
145+
이 방식은 enter/exit/update/layout/share Props와 결합하여 트리거 종류와 트랜지션 타입에 따라 동작을 맞출 수 있습니다.
146146

147147
```js
148148
<ViewTransition enter={{
@@ -157,9 +157,9 @@ exit={{
157157

158158
---
159159

160-
### Customize animations using `ViewTransition` events {/*customize-animations-using-viewtransition-events*/}
160+
### `ViewTransition` 이벤트로 애니메이션 커스텀하기 {/*customize-animations-using-viewtransition-events*/}
161161

162-
You can imperatively customize animations for an activated `ViewTransition` based on type using View Transition events:
162+
View Transition 이벤트를 활용하여 타입에 따라 활성화된 `ViewTransition`의 애니메이션을 즉시 커스터마이즈할 수 있습니다.
163163

164164
```
165165
<ViewTransition onUpdate={(inst, types) => {
@@ -173,10 +173,10 @@ You can imperatively customize animations for an activated `ViewTransition` base
173173
}}>
174174
```
175175

176-
This allows you to pick different imperative Animations based on the cause.
176+
이렇게 하면 원인에 따라 서로 다른 애니메이션을 선택할 수 있습니다.
177177

178178
---
179179

180-
## Troubleshooting {/*troubleshooting*/}
180+
## 문제 해결 {/*troubleshooting*/}
181181

182-
### TODO {/*todo2*/}
182+
### 해야 할 일 {/*todo2*/}

src/content/reference/react/apis.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ title: "내장 React API"
77
[Hook](/reference/react/hooks)[컴포넌트](/reference/react/components) 외에도 `react` 패키지는 컴포넌트를 정의하는데 유용한 몇 가지 API를 가지고 있습니다. 이 페이지는 최신 React API를 모두 나열합니다.
88

99
</Intro>
10-
{/*React 영문 공식 문서에 반영되지 않은 내용 임의로 수정하여 반영하였습니다. `cahce``use`에 대한 내용 설명을 제외하고 수정하지 말아주세요*/}
10+
{/*React 영문 공식 문서에 반영되지 않은 내용 임의로 수정하여 반영하였습니다. `cache``use`에 대한 내용 설명을 제외하고 수정하지 말아주세요*/}
1111
---
12-
* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
12+
* [`act`](/reference/react/act)를 통해 테스트에서 렌더링이나 상호작용을 감싸서 관련된 업데이트가 모두 처리된 뒤에 검증합니다.
1313
* [`cache`](/reference/react/cache)를 통해 가져온 데이터나 연산의 결과를 캐싱합니다.
14-
* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
15-
* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
16-
* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
17-
* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
14+
* [`captureOwnerStack`](/reference/react/captureOwnerStack)을 통해 개발 환경에서 현재 Owner Stack을 읽고, 사용가능한 문자열을 반환합니다.
15+
* [`createContext`](/reference/react/createContext)를 통해 자식 컴포넌트들에게 전달할 수 있는 컨텍스트를 정의하고 제공합니다. 보통 [`useContext`](/reference/react/useContext)와 함께 사용합니다.
16+
* [`lazy`](/reference/react/lazy)를 통해 컴포넌트가 처음 렌더링될 때까지 해당 컴포넌트의 코드를 로딩하는 것을 지연합니다.
17+
* [`memo`](/reference/react/memo)를 통해 동일한 Props일 경우 컴포넌트가 다시 렌더링되지 않도록 최적화합니다. 주로 [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback)과 함께 사용합니다.
18+
* [`startTransition`](/reference/react/startTransition)을 통해 상태 업데이트를 "덜 긴급한 작업"으로 표시하여 UI의 반응성을 유지합니다. [`useTransition`](/reference/react/useTransition)과 유사합니다.
1819
* [`use`](/reference/react/use)는 Promise나 Context와 같은 데이터를 참조하는 React Hook입니다.
20+
* [`taintObjectReference`](/reference/react/experimental_taintObjectReference)를 통해 `user` 객체와 같은 특정한 객체 인스턴스를 클라이언트 컴포넌트로 전송하는 것을 방지합니다.
21+
* [`taintUniqueValue`](/reference/react/experimental_taintUniqueValue)를 통해 패스워드, 키 또는 토큰과 같은 고유 값을 클라이언트 컴포넌트로 전송하는 것을 방지합니다.
22+
* [`addTransitionType`](/reference/react/addTransitionType)를 통해, 트랜지션이 발생한 원인을 상세히 나타냅니다.
1923
---
2024

2125
## Resource APIs {/*resource-apis*/}

0 commit comments

Comments
 (0)