You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/preinitModule.md
+26-25Lines changed: 26 additions & 25 deletions
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: preinitModule
4
4
5
5
<Note>
6
6
7
-
[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
7
+
[React 기반 프레임워크](/learn/start-a-new-react-project)에서는 리소스 로딩을 자동으로 처리해주는 경우가 많기 때문에 이 API를 직접 호출할 필요가 없을 수도 있습니다. 자세한 내용은 사용하는 프레임워크의 문서를 참고하세요.
8
8
9
9
</Note>
10
10
11
11
<Intro>
12
12
13
-
`preinitModule` lets you eagerly fetch and evaluate an ESM module.
13
+
`preinitModule`은 ESM 모듈을 미리 가져오고 평가(evaluate)할 수 있게 해줍니다.
To preinit an ESM module, call the`preinitModule`function from `react-dom`.
29
+
ESM 모듈을 사전에 preinit하려면, `react-dom` 패키지에서`preinitModule`함수를 호출하세요.
30
30
31
31
```js
32
32
import { preinitModule } from'react-dom';
@@ -38,36 +38,37 @@ function AppRoot() {
38
38
39
39
```
40
40
41
-
[See more examples below.](#usage)
41
+
[아래 예시를 더 참고하세요.](#usage)
42
42
43
-
The `preinitModule`function provides the browser with a hint that it should start downloading and executing the given module, which can save time. Modules that you `preinit` are executed when they finish downloading.
43
+
`preinitModule`함수는 브라우저에 해당 모듈을 다운로드하고 실행할 수 있다는 힌트를 제공하므로, 로딩 시간을 단축하는 데 도움이 됩니다. `preinit`된 모듈은 다운로드가 완료되는 즉시 실행됩니다.
44
44
45
-
#### Parameters {/*parameters*/}
45
+
#### 매개변수 {/*parameters*/}
46
46
47
-
*`href`: a string. The URL of the module you want to download and execute.
48
-
*`options`: an object. It contains the following properties:
49
-
*`as`: a required string. It must be `'script'`.
50
-
*`crossOrigin`: a string. The[CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous`and`use-credentials`.
51
-
*`integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
52
-
*`nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
47
+
*`href`: 문자열입니다. 다운로드하고 실행할 모듈의 URL입니다.
48
+
*`options`: 객체입니다. 다음 속성을 포함합니다:
49
+
*`as`: 필수 문자열입니다. 반드시 `'script'`여야 합니다.
50
+
*`crossOrigin`: 문자열입니다. 사용할[CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)을 지정합니다. 가능한 값은 `anonymous`또는`use-credentials`입니다.
51
+
*`integrity`: 문자열입니다. 모듈의 암호학적 해시로, [무결성을 검증](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)하는 데 사용됩니다.
52
+
*`nonce`: 문자열입니다. 엄격한 Content Security Policy를 사용할 때 모듈을 허용하기 위한 암호학적 [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)입니다.
53
53
54
-
#### Returns {/*returns*/}
54
+
#### 반환값 {/*returns*/}
55
55
56
-
`preinitModule` returns nothing.
56
+
`preinitModule`은 값을 반환하지 않습니다.
57
57
58
-
#### Caveats {/*caveats*/}
58
+
#### 주의 사항 {/*caveats*/}
59
+
60
+
* 동일한 `href`로 `preinitModule`을 여러 번 호출해도, 한 번 호출한 것과 동일한 효과만 발생합니다.
61
+
* 브라우저에서는 컴포넌트를 렌더링할 때, 이펙트 안에서, 이벤트 핸들러 등 어떤 상황에서도 `preinitModule`을 호출할 수 있습니다.
62
+
* 서버 측 렌더링이나 Server Components를 렌더링할 때는, `preinitModule`는 컴포넌트를 렌더링하는 중이거나 렌더링에서 파생된 비동기 컨텍스트 내에서 호출한 경우에만 효과가 있습니다. 그 외의 호출은 무시됩니다.
59
63
60
-
* Multiple calls to `preinitModule` with the same `href` have the same effect as a single call.
61
-
* In the browser, you can call `preinitModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
62
-
* In server-side rendering or when rendering Server Components, `preinitModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
63
64
64
65
---
65
66
66
-
## Usage {/*usage*/}
67
+
## 사용법 {/*usage*/}
67
68
68
-
### Preloading when rendering {/*preloading-when-rendering*/}
69
+
### 렌더링 중 사전 로딩하기 {/*preloading-when-rendering*/}
69
70
70
-
Call `preinitModule` when rendering a component if you know that it or its children will use a specific module and you're OK with the module being evaluated and thereby taking effect immediately upon being downloaded.
71
+
특정 모듈이 현재 컴포넌트나 자식 컴포넌트에서 사용될 것임을 알고 있고, 해당 모듈이 다운로드 즉시 평가되어 효과를 발휘해도 괜찮다면, 컴포넌트를 렌더링할 때 `preinitModule`을 호출하세요.
71
72
72
73
```js
73
74
import { preinitModule } from'react-dom';
@@ -78,11 +79,11 @@ function AppRoot() {
78
79
}
79
80
```
80
81
81
-
If you want the browser to download the module but not to execute it right away, use [`preloadModule`](/reference/react-dom/preloadModule) instead. If you want to preinit a script that isn't an ESM module, use [`preinit`](/reference/react-dom/preinit).
82
+
모듈을 다운로드하되 즉시 실행하지 않으려면 [`preloadModule`](/reference/react-dom/preloadModule)을 사용하세요. ESM 모듈이 아닌 스크립트를 사전 초기화하려면 [`preinit`](/reference/react-dom/preinit)을 사용하세요.
82
83
83
-
### Preloading in an event handler {/*preloading-in-an-event-handler*/}
84
+
### 이벤트 핸들러에서 사전 로딩하기 {/*preloading-in-an-event-handler*/}
84
85
85
-
Call `preinitModule` in an event handler before transitioning to a page or state where the module will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
86
+
이벤트 핸들러에서 모듈이 필요해질 페이지나 상태로 전환하기 전에 `preinitModule`을 호출하세요. 이렇게 하면 새로운 페이지나 상태를 렌더링할 때보다 더 일찍 로딩을 시작할 수 있습니다.
0 commit comments