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/handling-events.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -56,9 +56,9 @@ function ActionLink() {
56
56
57
57
여기서 `e`는 통합적인 이벤트입니다. React는 [W3C 스펙](https://www.w3.org/TR/DOM-Level-3-Events/)에 따라 통합적인 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. 더 자세한 사항은 [`SyntheticEvent`](/docs/events.html)을 참고하시기 바랍니다.
58
58
59
-
React를 사용할 때 DOM 엘리먼트가 생성 된 후 리스너를 추가하기 위해 `addEventListener`를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더될 때 리스너를 제공하면 됩니다.
59
+
React를 사용할 때 DOM 엘리먼트가 생성 된 후 리스너를 추가하기 위해 `addEventListener`를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다.
60
60
61
-
[ES6 클래스](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것입니다. 예를 들어, 다음 `Toggle` 컴포넌트는 사용자가 "ON"과 "OFF" 상태를 토글 할 수 있는 버튼을 렌더합니다.
61
+
[ES6 class](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 class의 메서드로 만드는 것입니다. 예를 들어, 다음 `Toggle` 컴포넌트는 사용자가 "ON"과 "OFF" 상태를 토글 할 수 있는 버튼을 렌더링합니다.
JSX 콜백안에서 `this`의 의미에 대해 주의해야 합니다. JavaScript에서 클래스 메서드는 기본적으로 [바인드](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)되어 있지 않습니다. `this.handleClick`을 바인드 하지 않고 `onClick`에 전달하였다면, 함수가 실제 호출될 때 `this`는 `undefined`가 됩니다.
96
+
JSX 콜백안에서 `this`의 의미에 대해 주의해야 합니다. JavaScript에서 class 메서드는 기본적으로 [바인드](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)되어 있지 않습니다. `this.handleClick`을 바인드 하지 않고 `onClick`에 전달하였다면, 함수가 실제 호출될 때 `this`는 `undefined`가 됩니다.
97
97
98
98
이는 React만의 특수한 동작이 아니며, [JavaScript에서 함수가 작동하는 방식](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/)의 일부입니다. 일반적으로 `onClick={this.handleClick}`과 같이 뒤에 `()`를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인드 해야 합니다.
99
99
100
-
만약 `bind`를 호출하는 것이 불편하다면, 이를 해결할 수 있는 두 가지 방법이 있습니다. 실험적인 [퍼블릭 클래스 필드 문법](https://babeljs.io/docs/plugins/transform-class-properties/)을 사용하고 있다면, 클래스 필드를 사용하여 콜백을 올바르게 바인드할 수 있습니다.
100
+
만약 `bind`를 호출하는 것이 불편하다면, 이를 해결할 수 있는 두 가지 방법이 있습니다. 실험적인 [public class fields 문법](https://babeljs.io/docs/plugins/transform-class-properties/)을 사용하고 있다면, class fields를 사용하여 콜백을 올바르게 바인드할 수 있습니다.
101
101
102
102
```js{2-6}
103
103
class LoggingButton extends React.Component {
@@ -119,7 +119,7 @@ class LoggingButton extends React.Component {
119
119
120
120
[Create React App](https://github.com/facebookincubator/create-react-app)에서는 이 문법이 기본적으로 설정되어 있습니다.
121
121
122
-
만약 클래스 필드 문법을 사용하고 있지 않다면, 콜백에 [화살표 함수](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용하는 방법도 있습니다.
122
+
만약 class fields 문법을 사용하고 있지 않다면, 콜백에 [화살표 함수](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 {
@@ -138,7 +138,7 @@ class LoggingButton extends React.Component {
138
138
}
139
139
```
140
140
141
-
이 문법의 문제점은 `LoggingButton`이 렌더될 때마다 다른 콜백이 생성된다는 것입니다. 대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수도 있습니다. 이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인드하거나 클래스 필드 문법을 사용하는 것을 권장합니다.
141
+
이 문법의 문제점은 `LoggingButton`이 렌더링될 때마다 다른 콜백이 생성된다는 것입니다. 대부분의 경우 문제가 되지 않으나, 콜백이 하위 컴포넌트에 props로서 전달된다면 그 컴포넌트들은 추가로 다시 렌더링을 수행할 수도 있습니다. 이러한 종류의 성능 문제를 피하고자, 생성자 안에서 바인드하거나 class fields 문법을 사용하는 것을 권장합니다.
142
142
143
143
## 이벤트 핸들러에 인자 전달하기 {#passing-arguments-to-event-handlers}
0 commit comments