Skip to content

Commit 78f59da

Browse files
dalinaummarocchino
authored andcommitted
Translate tips 11 to Korean
1. Create 11-dom-event-listeners.ko-KR.md 2. Update 03-interactivity-and-dynamic-uis.ko-KR.md to add an anchor. Based on 52494f9
1 parent 792c161 commit 78f59da

File tree

2 files changed

+46
-0
lines changed

2 files changed

+46
-0
lines changed

docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히
4242

4343

4444
## 기본 구현: 오토바인딩과 이벤트 델리게이션
45+
<a name="under-the-hood-autobinding-and-event-delegation"></a>
4546

4647
코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.
4748

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
id: dom-event-listeners-ko-KR
3+
title: 컴포넌트에서 DOM 이벤트 리스너
4+
layout: tips
5+
permalink: dom-event-listeners-ko-KR.html
6+
prev: props-in-getInitialState-as-anti-pattern-ko-KR.html
7+
next: initial-ajax-ko-KR.html
8+
---
9+
10+
> 주의:
11+
>
12+
> 이 글은 React에서 제공되지 않은 DOM 이벤트를 어떻게 붙이는지 설명합니다. ([더 자세한 정보는 여기에서 보세요.](/react/docs/events-ko-KR.html)). 이는 jQuery 같은 다른 라이브러리들을 통합할 때 좋습니다.
13+
14+
윈도우 크기를 조절해봅시다.
15+
16+
```js
17+
var Box = React.createClass({
18+
getInitialState: function() {
19+
return {windowWidth: window.innerWidth};
20+
},
21+
22+
handleResize: function(e) {
23+
this.setState({windowWidth: window.innerWidth});
24+
},
25+
26+
componentDidMount: function() {
27+
window.addEventListener('resize', this.handleResize);
28+
},
29+
30+
componentWillUnmount: function() {
31+
window.removeEventListener('resize', this.handleResize);
32+
},
33+
34+
render: function() {
35+
return <div>Current window width: {this.state.windowWidth}</div>;
36+
}
37+
});
38+
39+
React.render(<Box />, mountNode);
40+
```
41+
42+
컴포넌트가 마운트 되고 DOM 표현을 가지게 되면 `componentDidMount`가 호출됩니다. 일반적인 DOM 이벤트를 붙이는 곳으로 여기를 종종 사용합니다.
43+
44+
이벤트 콜백은 원래 엘리먼트 대신 React 컴포넌트에 바인드하는 걸 주의합시다. React는 [오토바인드](/react/docs/interactivity-and-dynamic-uis-ko-KR.html#under-the-hood-autobinding-and-event-delegation) 과정에서 메서드를 현재 컴포넌트 인스턴스로 바인드합니다.
45+

0 commit comments

Comments
 (0)