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: content/docs/code-splitting.md
+51-73
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,16 @@
1
1
---
2
2
id: code-splitting
3
-
title: Code-Splitting
3
+
title: 코드 분할
4
4
permalink: docs/code-splitting.html
5
5
---
6
6
7
-
## Bundling {#bundling}
7
+
## 번들링 {#bundling}
8
8
9
-
Most React apps will have their files "bundled" using tools like
10
-
[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/).
11
-
Bundling is the process of following imported files and merging them into a
12
-
single file: a "bundle". This bundle can then be included on a webpage to load
13
-
an entire app at once.
9
+
대부분 React 앱들은 [Webpack](https://webpack.js.org/) 이나 [Browserify](http://browserify.org/) 같은 툴을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다.
14
10
15
-
#### Example {#example}
11
+
#### 예시 {#example}
16
12
17
-
**App:**
13
+
**App**
18
14
19
15
```js
20
16
// app.js
@@ -30,7 +26,7 @@ export function add(a, b) {
30
26
}
31
27
```
32
28
33
-
**Bundle:**
29
+
**Bundle**
34
30
35
31
```js
36
32
functionadd(a, b) {
@@ -40,86 +36,71 @@ function add(a, b) {
40
36
console.log(add(16, 26)); // 42
41
37
```
42
38
43
-
> Note:
39
+
> 주의
44
40
>
45
-
> Your bundles will end up looking a lot different than this.
41
+
> 실제 번들은 위 예시와는 많이 다르게 보일 겁니다.
46
42
47
-
If you're using [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your
48
-
app.
43
+
[Create React App](https://github.com/facebookincubator/create-react-app)이나 [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) 혹은 비슷한 툴을 사용한다면 여러분이 설치한 앱에서 Webpack을 같이 설치했을 겁니다.
49
44
50
-
If you aren't, you'll need to setup bundling yourself. For example, see the
51
-
[Installation](https://webpack.js.org/guides/installation/) and
52
-
[Getting Started](https://webpack.js.org/guides/getting-started/) guides on the
53
-
Webpack docs.
45
+
이런 툴을 사용하지 않는다면 여러분이 스스로 번들링을 설정해야 합니다. 이 경우 Webpack의
[시작하기](https://webpack.js.org/guides/getting-started/) 문서를 참조해 주세요.
54
48
55
-
## Code Splitting {#code-splitting}
49
+
## 코드 분할 {#code-splitting}
56
50
57
-
Bundling is great, but as your app grows, your bundle will grow too. Especially
58
-
if you are including large third-party libraries. You need to keep an eye on
59
-
the code you are including in your bundle so that you don't accidentally make
60
-
it so large that your app takes a long time to load.
51
+
번들링은 훌륭하지만 여러분의 앱이 커지면 번들도 커집니다. 특히 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 합니다.
61
52
62
-
To avoid winding up with a large bundle, it's good to get ahead of the problem
63
-
and start "splitting" your bundle.
64
-
[Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature
65
-
supported by bundlers like Webpack and Browserify (via
66
-
[factor-bundle](https://github.com/browserify/factor-bundle)) which can create
67
-
multiple bundles that can be dynamically loaded at runtime.
53
+
번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 "나누는" 것입니다.
54
+
[코드 분할](https://webpack.js.org/guides/code-splitting/)은 런타임시 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack 와 Browserify ([factor-bundle](https://github.com/browserify/factor-bundle)) 같은 번들러들이 지원하는 기능입니다.
68
55
69
-
Code-splitting your app can help you "lazy-load" just the things that are
70
-
currently needed by the user, which can dramatically improve the performance of
71
-
your app. While you haven't reduced the overall amount of code in your app,
72
-
you've avoided loading code that the user may never need, and reduced the amount
73
-
of code needed during the initial load.
56
+
57
+
코드 분할은 여러분의 앱을 "지연 로딩" 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다.
58
+
앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다.
74
59
75
60
## `import()` {#import}
76
61
77
-
The best way to introduce code-splitting into your app is through the dynamic
78
-
`import()` syntax.
62
+
앱에 코드 분할을 도입하는 가장 좋은 방법은 동적 `import()` 문법을 사용하는 방법입니다.
79
63
80
-
**Before:**
64
+
**Before**
81
65
82
66
```js
83
67
import { add } from'./math';
84
68
85
69
console.log(add(16, 26));
86
70
```
87
71
88
-
**After:**
72
+
**After**
89
73
90
74
```js
91
75
import("./math").then(math=> {
92
76
console.log(math.add(16, 26));
93
77
});
94
78
```
95
79
96
-
> Note:
80
+
> 주의
97
81
>
98
-
> The dynamic `import()` syntax is a ECMAScript (JavaScript)
99
-
> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently
100
-
> part of the language standard. It is expected to be accepted in the
101
-
> near future.
82
+
> 동적 `import()` 문법은 아직 ECMAScript (JavaScript)의 표준 문법이 아니라
When Webpack comes across this syntax, it automatically starts code-splitting
104
-
your app. If you're using Create React App, this is already configured for you
105
-
and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
106
-
out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
86
+
Webpack이 이 구문을 만나게 되면 앱의 코드를 분할합니다.
87
+
Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 [사용](https://facebook.github.io/create-react-app/docs/code-splitting)할 수 있습니다.
88
+
[Next.js](https://github.com/zeit/next.js/#dynamic-import) 역시 지원합니다.
107
89
108
-
If you're setting up Webpack yourself, you'll probably want to read Webpack's
109
-
[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
90
+
스스로 Webpack을 구성하고자 한다면 Webpack의
91
+
[코드 분할 가이드](https://webpack.js.org/guides/code-splitting/)를 참조하세요. Webpack 설정은 [가이드](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)에 있습니다.
110
92
111
-
When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can
112
-
parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
93
+
[Babel](http://babeljs.io/)을 사용할 때는 Babel이 동적 import를 인식할 수 있지만 변환하지는 않도록 합니다. 이를 위해 [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)를 사용하세요.
113
94
114
95
## `React.lazy` {#reactlazy}
115
96
116
-
> Note:
97
+
> 주의
117
98
>
118
-
> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).
99
+
> `React.lazy`와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 코드 분할을 하기 원한다면 [Loadable Components](https://github.com/smooth-code/loadable-components)를 추천합니다. 이는 [서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md)입니다.
119
100
120
-
The `React.lazy`function lets you render a dynamic import as a regular component.
101
+
`React.lazy`함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다.
`MyComponent`가 렌더링 될 때 `OtherComponent`를 포함한 번들을 자동으로 불러옵니다.
149
131
150
-
This will automatically load the bundle containing the `OtherComponent` when this component gets rendered.
151
-
152
-
`React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component.
132
+
`React.lazy`는 동적 `import()`를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를
133
+
포함하며 `default` export를 가진 모듈로 결정되는 `Promise`로 반환해야 합니다.
153
134
154
135
### Suspense {#suspense}
155
136
156
-
If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component.
137
+
`MyComponent`를 렌더링할 때 `OtherComponent`를 포함하는 모듈이 아직 로드되지 않았다면, 로드를 기다리는 동안 로딩처럼 예비 컨텐츠를 보여줘야 합니다. 이는 `Suspense` 컴포넌트를 사용하여 처리할 수 있습니다.
The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component.
153
+
`fallback` prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들입니다. `Suspense` 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 `Suspense` 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다.
If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error.
175
+
네트워크 장애 같은 이유로 다른 모듈을 로드에 실패할 경우 에러를 발생시킬 수 있습니다. 이때 [Error Boundaries](/docs/error-boundaries.html)를 이용하여 사용자의 경험과 복구 관리를 처리할 수 있습니다.
176
+
Error Boundary를 만들고 lazy 컴포넌트를 감싸면 네트워크 장애가 발생했을 때 에러를 표시할 수 있습니다.
`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components.
228
+
`React.lazy`는 현재 default exports만 지원합니다. named exports를 사용하고자 한다면 default로 이름을 재정의한 중간 모듈을 생성할 수 있습니다. 이렇게 하면 treeshaking이 계속 동작하고 사용하지 않는 컴포넌트는 가져오지 않습니다.
Copy file name to clipboardExpand all lines: content/docs/optimizing-performance.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -430,6 +430,6 @@ x === z; // true
430
430
431
431
In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`.
432
432
433
-
Two other libraries that can help use immutable data are [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) and [immutability-helper](https://github.com/kolodny/immutability-helper).
433
+
Other libraries that can help use immutable data include [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper), and [seamless-immutable](https://github.com/rtfeldman/seamless-immutable).
434
434
435
435
Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost.
Copy file name to clipboardExpand all lines: content/docs/reference-glossary.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -122,7 +122,7 @@ class Welcome extends React.Component {
122
122
123
123
컴포넌트와 관련된 일부 데이터가 시간에 따라 변경될 경우 `state`가 필요합니다. 예를 들어, `Checkbox` 컴포넌트는 `isChecked` state가 필요할 수 있으며, `NewsFeed` 컴포넌트는 `fetchedPosts`를 컴포넌트의 state를 통해 계속 주시하려고 할 수 있습니다.
124
124
125
-
`state`와 `props`의 가장 중요한 차이점은 `props`는 부모 컴포넌트로부터 전달받지만, `state`는 컴포넌트에서 관리된다는 것입니다. 컴포넌트는 `props`를 변경할 수 없지만, `state`는 변경할 수 있습니다.`this.setState()`를 호출하면 컴포넌트에서 `state`를 변경할 수 있습니다. 또한, class로 정의된 컴포넌트만 `state`를 가질 수 있습니다.
125
+
`state`와 `props`의 가장 중요한 차이점은 `props`는 부모 컴포넌트로부터 전달받지만, `state`는 컴포넌트에서 관리된다는 것입니다. 컴포넌트는 `props`를 변경할 수 없지만, `state`는 변경할 수 있습니다.
126
126
127
127
데이터가 변경되는 각 특정한 부분에 대해, 해당 상태(state)를 "소유"하는 컴포넌트는 하나만 존재해야 합니다. 서로 다른 두 컴포넌트의 상태를 동기화하려고 하지 마십시오. 대신, 공통 상태를 두 컴포넌트의 공통 조상으로 [끌어올리고](/docs/lifting-state-up.html) 해당 데이터를 두 컴포넌트에 props로 전달하세요.
Copy file name to clipboardExpand all lines: content/docs/state-and-lifecycle.md
-2
Original file line number
Diff line number
Diff line change
@@ -72,8 +72,6 @@ To implement this, we need to add "state" to the `Clock` component.
72
72
73
73
State is similar to props, but it is private and fully controlled by the component.
74
74
75
-
We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
76
-
77
75
## Converting a Function to a Class {#converting-a-function-to-a-class}
78
76
79
77
You can convert a function component like `Clock` to a class in five steps:
0 commit comments