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/preinit.md
+34-32Lines changed: 34 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: preinit
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
-
`preinit` lets you eagerly fetch and evaluate a stylesheet or external script.
The `preinit`function provides the browser with a hint that it should start downloading and executing the given resource, which can save time. Scripts that you `preinit` are executed when they finish downloading. Stylesheets that you preinit are inserted into the document, which causes them to go into effect right away.
43
+
`preinit`함수는 브라우저에게 주어진 리소스를 다운로드하고 실행하라는 힌트를 제공하여 시간 절약에 도움을 줍니다. `preinit`한 스크립트는 다운로드가 완료되면 즉시 실행됩니다. 스타일시트는 문서에 삽입되어 곧바로 적용됩니다.
44
44
45
-
#### Parameters {/*parameters*/}
45
+
#### 매개변수 {/*parameters*/}
46
46
47
-
*`href`: a string. The URL of the resource you want to download and execute.
48
-
*`options`: an object. It contains the following properties:
49
-
*`as`: a required string. The type of resource. Its possible values are `script` and `style`.
50
-
*`precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`.
51
-
*`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`. It is required when `as`is set to `"fetch"`.
52
-
*`integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
53
-
*`nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
54
-
*`fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
47
+
*`href`: 문자열. 다운로드하고 실행할 리소스의 URL입니다.
48
+
*`options`: 객체. 다음 속성들을 포함할 수 있습니다:
49
+
*`as`: 필수 문자열. 리소스의 유형입니다. 가능한 값은 `script`와 `style`입니다.
50
+
*`precedence`: 문자열. 스타일시트에 필수입니다. 다른 스타일시트와의 삽입 순서를 결정합니다. 우선순위가 높은 스타일시트가 낮은 것을 덮어쓸 수 있습니다. 가능한 값은 `reset`, `low`, `medium`, `high`입니다.
51
+
*`crossOrigin`: 문자열. 사용할[CORS 정책](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)입니다. 가능한 값은 `anonymous`와`use-credentials`입니다. `as`가 `"fetch"`일 때 필수입니다.
52
+
*`integrity`: 문자열. 리소스의 [무결성을 검증](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)하기 위한 암호화 해시입니다.
53
+
*`nonce`: 문자열. 엄격한 콘텐츠 보안 정책을 사용할 때, 리소스를 허용하기 위한 암호화된 [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)입니다.
54
+
*`fetchPriority`: 문자열. 리소스를 가져오는 데 사용할 상대적인 우선순위를 제안합니다. 가능한 값은 `auto` (기본값), `high`, `low`입니다.
55
55
56
-
#### Returns {/*returns*/}
56
+
#### 반환값 {/*returns*/}
57
57
58
-
`preinit` returns nothing.
58
+
`preinit`은 아무것도 반환하지 않습니다.
59
+
60
+
#### 주의 사항 {/*caveats*/}
61
+
62
+
* 동일한 `href`로 `preinit`을 여러 번 호출해도, 한 번 호출한 것과 동일한 효과만 발생합니다.
63
+
* 브라우저에서는 컴포넌트를 렌더링할 때, Effect 내부에서, 이벤트 핸들러 안에서 등 어떤 상황에서든 `preinit`을 호출할 수 있습니다.
64
+
* 서버 사이드 렌더링 또는 서버 컴포넌트를 렌더링할 때는, 컴포넌트를 렌더링하면서 또는 컴포넌트 렌더링에서 시작된 비동기 컨텍스트 내에서만 `preinit` 호출이 효과를 가집니다. 그 외의 호출은 무시됩니다.
59
65
60
-
#### Caveats {/*caveats*/}
61
66
62
-
* Multiple calls to `preinit` with the same `href` have the same effect as a single call.
63
-
* In the browser, you can call `preinit` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
64
-
* In server-side rendering or when rendering Server Components, `preinit` 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.
65
67
66
68
---
67
69
68
-
## Usage {/*usage*/}
70
+
## 사용법 {/*usage*/}
69
71
70
-
### Preiniting when rendering {/*preiniting-when-rendering*/}
72
+
### 렌더링 시 preinit 하기 {/*preiniting-when-rendering*/}
71
73
72
-
Call `preinit` when rendering a component if you know that it or its children will use a specific resource, and you're OK with the resource being evaluated and thereby taking effect immediately upon being downloaded.
74
+
특정 컴포넌트나 그 자식 컴포넌트가 특정 리소스를 사용할 것을 알고 있고, 해당 리소스가 다운로드되자마자 바로 실행되거나 적용되는 것이 괜찮다면, 컴포넌트를 렌더링할 때 `preinit`을 호출하세요.
73
75
74
-
<RecipestitleText="Examples of preiniting">
76
+
<RecipestitleText="preinit 사용 예시">
75
77
76
-
#### Preiniting an external script {/*preiniting-an-external-script*/}
78
+
#### 외부 스크립트 preinit 하기 {/*preiniting-an-external-script*/}
77
79
78
80
```js
79
81
import { preinit } from'react-dom';
@@ -84,11 +86,11 @@ function AppRoot() {
84
86
}
85
87
```
86
88
87
-
If you want the browser to download the script but not to execute it right away, use [`preload`](/reference/react-dom/preload) instead. If you want to load an ESM module, use[`preinitModule`](/reference/react-dom/preinitModule).
#### Preiniting a stylesheet {/*preiniting-a-stylesheet*/}
93
+
#### 스타일시트 preinit 하기 {/*preiniting-a-stylesheet*/}
92
94
93
95
```js
94
96
import { preinit } from'react-dom';
@@ -99,17 +101,17 @@ function AppRoot() {
99
101
}
100
102
```
101
103
102
-
The `precedence` option, which is required, lets you control the order of stylesheets within the document. Stylesheets with higher precedence can overrule those with lower precedence.
104
+
스타일시트의 삽입 순서를 제어하려면 필수 옵션인 `precedence`를 지정하세요. 우선순위가 높은 스타일시트가 낮은 것을 덮어쓸 수 있습니다.
103
105
104
-
If you want to download the stylesheet but not to insert it into the document right away, use [`preload`](/reference/react-dom/preload) instead.
106
+
스타일시트를 다운로드하되 문서에 바로 삽입하지 않으려면 [`preload`](/reference/react-dom/preload)를 사용하세요.
105
107
106
108
<Solution />
107
109
108
110
</Recipes>
109
111
110
-
### Preiniting in an event handler {/*preiniting-in-an-event-handler*/}
112
+
### 이벤트 핸들러 내에서 preinit 하기 {/*preiniting-in-an-event-handler*/}
111
113
112
-
Call `preinit` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
114
+
외부 리소스가 필요한 페이지나 상태로 전환하기 전에 이벤트 핸들러에서 `preinit`을 호출하세요. 이렇게 하면 새 페이지나 상태 렌더링 시점보다 더 일찍 리소스 다운로드가 시작됩니다.
1. 폼의 <CodeStep step={1}>현재 State</CodeStep>는, 처음에는 전달한 <CodeStep step={4}>초기 State</CodeStep>로 설정되며, 폼이 제출된 후에는 전달한 <CodeStep step={3}>액션</CodeStep>의 반환값으로 설정됩니다.
106
+
2. `<form>`의 `action` Prop에 전달하거나 `startTransition` 안에서 직접 호출할 수 있는<CodeStep step={2}>새로운 액션</CodeStep>입니다.
107
107
3. 액션이 처리되는 동안 사용할 수 있는 <CodeStep step={1}>대기<sup>Pending</sup> State</CodeStep>입니다.
108
-
1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
109
-
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop or call manually within `startTransition`.
110
-
3. A <CodeStep step={1}>pending state</CodeStep> that you can utilise while your action is processing.
111
108
112
-
폼 제출 시, <CodeStep step={3}>액션</CodeStep> 함수가 호출되고 그 반환값이 폼의 새로운 <CodeStep step={1}>현재 State</CodeStep>가 됩니다.
113
109
114
-
또한 <CodeStep step={3}>액션</CodeStep> 함수는 새롭게 추가된 첫 번째 인수로 폼의 <CodeStep step={1}>현재 State</CodeStep>를 받습니다. (처음엔 <CodeStep step={4}>초기 State</CodeStep>, 그 후에는 직전 반환값) 나머지 인수들은 일반 폼 액션 호출과 동일합니다.
110
+
폼이 제출되면, 제공한 <CodeStep step={3}>액션</CodeStep> 함수가 호출되며, 해당 함수의 반환값이 새로운 <CodeStep step={1}>현재 State</CodeStep>로 설정됩니다.
111
+
112
+
이 <CodeStep step={3}>액션</CodeStep> 함수는 첫 번째 인수로 <CodeStep step={1}>현재 State</CodeStep>를 추가로 전달받습니다.
113
+
처음 제출될 때는<CodeStep step={4}>초기 State</CodeStep>가 전달되며, 이후 제출부터는 직전 호출 시 반환된 값이 전달됩니다. 나머지 인수들은 useActionState를 사용하지 않았을 때와 동일합니다.
0 commit comments