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
When Webpack comes across this syntax, it automatically starts code-splitting
104
104
your app. If you're using Create React App, this is already configured for you
105
-
and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
105
+
and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
106
106
out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
107
107
108
108
If you're setting up Webpack yourself, you'll probably want to read Webpack's
Copy file name to clipboardExpand all lines: content/docs/handling-events.md
+26-26
Original file line number
Diff line number
Diff line change
@@ -1,43 +1,43 @@
1
1
---
2
2
id: handling-events
3
-
title: Handling Events
3
+
title: 이벤트 처리하기
4
4
permalink: docs/handling-events.html
5
5
prev: state-and-lifecycle.html
6
6
next: conditional-rendering.html
7
7
redirect_from:
8
8
- "docs/events-ko-KR.html"
9
9
---
10
10
11
-
Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
11
+
React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법적인 차이는 다음과 같습니다.
12
12
13
-
*React events are named using camelCase, rather than lowercase.
14
-
*With JSX you pass a function as the event handler, rather than a string.
13
+
*React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.
14
+
*JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.
15
15
16
-
For example, the HTML:
16
+
예를 들어, HTML은 다음과 같습니다.
17
17
18
18
```html
19
19
<buttononclick="activateLasers()">
20
20
Activate Lasers
21
21
</button>
22
22
```
23
23
24
-
is slightly different in React:
24
+
React에서는 약간 다릅니다.
25
25
26
26
```js{1}
27
27
<button onClick={activateLasers}>
28
28
Activate Lasers
29
29
</button>
30
30
```
31
31
32
-
Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
32
+
또 다른 차이점으로, React에서는 `false`를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 `preventDefault`를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 다음과 같은 코드를 작성합니다.
33
33
34
34
```html
35
35
<ahref="#"onclick="console.log('The link was clicked.'); return false">
36
36
Click me
37
37
</a>
38
38
```
39
39
40
-
In React, this could instead be:
40
+
React에서는 다음과 같이 작성할 수 있습니다.
41
41
42
42
```js{2-5,8}
43
43
function ActionLink() {
@@ -54,19 +54,19 @@ function ActionLink() {
54
54
}
55
55
```
56
56
57
-
Here,`e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
57
+
여기서`e`는 합성 이벤트입니다. React는 [W3C 명세](https://www.w3.org/TR/DOM-Level-3-Events/)에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. 더 자세한 사항은 [`합성 이벤트`](/docs/events.html)을 참고하시기 바랍니다.
58
58
59
-
When using React you should generally not need to call`addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
59
+
React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해`addEventListener`를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다.
60
60
61
-
When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this`Toggle`component renders a button that lets the user toggle between "ON" and "OFF" states:
61
+
[ES6 클래스](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것입니다. 예를 들어, 다음`Toggle`컴포넌트는 사용자가 "ON"과 "OFF" 상태를 토글 할 수 있는 버튼을 렌더링합니다.
62
62
63
63
```js{6,7,10-14,18}
64
64
class Toggle extends React.Component {
65
65
constructor(props) {
66
66
super(props);
67
67
this.state = {isToggleOn: true};
68
68
69
-
// This binding is necessary to make `this` work in the callback
69
+
// 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
70
70
this.handleClick = this.handleClick.bind(this);
71
71
}
72
72
@@ -91,18 +91,18 @@ ReactDOM.render(
91
91
);
92
92
```
93
93
94
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
96
+
JSX 콜백 안에서 `this`의 의미에 대해 주의해야 합니다. JavaScript에서 클래스 메서드는 기본적으로 [바인딩](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)되어 있지 않습니다. `this.handleClick`을 바인딩하지 않고 `onClick`에 전달하였다면, 함수가 실제 호출될 때 `this`는 `undefined`가 됩니다.
97
97
98
-
This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
98
+
이는 React만의 특수한 동작이 아니며, [JavaScript에서 함수가 작동하는 방식](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)의 일부입니다. 일반적으로 `onClick={this.handleClick}`과 같이 뒤에 `()`를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해야 합니다.
99
99
100
-
If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
100
+
만약 `bind`를 호출하는 것이 불편하다면, 이를 해결할 수 있는 두 가지 방법이 있습니다. 실험적인 [퍼블릭 클래스 필드 문법](https://babeljs.io/docs/plugins/transform-class-properties/)을 사용하고 있다면, 클래스 필드를 사용하여 콜백을 올바르게 바인딩할 수 있습니다.
101
101
102
102
```js{2-6}
103
103
class LoggingButton extends React.Component {
104
-
// This syntax ensures `this` is bound within handleClick.
105
-
// Warning: this is *experimental* syntax.
104
+
// 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
105
+
// 주의: 이 문법은 *실험적인* 문법입니다.
106
106
handleClick = () => {
107
107
console.log('this is:', this);
108
108
}
@@ -117,9 +117,9 @@ class LoggingButton extends React.Component {
117
117
}
118
118
```
119
119
120
-
This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
120
+
[Create React App](https://github.com/facebookincubator/create-react-app)에서는 이 문법이 기본적으로 설정되어 있습니다.
121
121
122
-
If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
122
+
만약 클래스 필드 문법을 사용하고 있지 않다면, 콜백에 [화살표 함수](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용하는 방법도 있습니다.
123
123
124
124
```js{7-9}
125
125
class LoggingButton extends React.Component {
@@ -128,7 +128,7 @@ class LoggingButton extends React.Component {
128
128
}
129
129
130
130
render() {
131
-
// This syntax ensures `this` is bound within handleClick
131
+
// 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
132
132
return (
133
133
<button onClick={(e) => this.handleClick(e)}>
134
134
Click me
@@ -138,17 +138,17 @@ class LoggingButton extends React.Component {
138
138
}
139
139
```
140
140
141
-
The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
141
+
이 문법의 문제점은 `LoggingButton`이 렌더링될 때마다 다른 콜백이 생성된다는 것입니다. 대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수도 있습니다. 이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인딩하거나 클래스 필드 문법을 사용하는 것을 권장합니다.
142
142
143
-
## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
143
+
## 이벤트 핸들러에 인자 전달하기 {#passing-arguments-to-event-handlers}
144
144
145
-
Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
145
+
루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적입니다. 예를 들어, `id`가 행의 ID일 경우 다음 코드가 모두 작동합니다.
The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
152
+
위 두 줄은 동등하며 각각 [화살표 함수](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)와 [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)를 사용합니다.
153
153
154
-
In both cases, the `e`argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
154
+
두 경우 모두 React 이벤트를 나타내는 `e`인자가 ID 뒤에 두 번째 인자로 전달됩니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 `bind`를 사용할 경우 추가 인자가 자동으로 전달됩니다.
Copy file name to clipboardExpand all lines: content/docs/reference-glossary.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -130,7 +130,7 @@ class Welcome extends React.Component {
130
130
131
131
생명주기 메서드(Lifecycle method)는 컴포넌트의 각각의 단계에서 실행되는 커스텀 기능입니다. 컴포넌트가 만들어지고 DOM에 삽입될 때([mounting](/docs/react-component.html#mounting)), 컴포넌트가 업데이트될 때 및 컴포넌트가 DOM에서 마운트 해제될 때(unmounted) 혹은 제거될 때 사용할 수 있는 기능을 제공합니다.
132
132
133
-
## [제어 컴포넌 트](/docs/forms.html#controlled-components) vs. [비제어 컴포넌트](/docs/uncontrolled-components.html)
133
+
## [제어 컴포넌트](/docs/forms.html#controlled-components) vs. [비제어 컴포넌트](/docs/uncontrolled-components.html)
0 commit comments