diff --git a/docs/03-interactivity-and-dynamic-uis.ko-KR.md b/docs/03-interactivity-and-dynamic-uis.ko-KR.md index 8154084a..a8c48268 100644 --- a/docs/03-interactivity-and-dynamic-uis.ko-KR.md +++ b/docs/03-interactivity-and-dynamic-uis.ko-KR.md @@ -42,6 +42,7 @@ React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 ## 기본 구현: 오토바인딩과 이벤트 델리게이션 + 코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다. diff --git a/tips/11-dom-event-listeners.ko-KR.md b/tips/11-dom-event-listeners.ko-KR.md new file mode 100644 index 00000000..8ecb25f6 --- /dev/null +++ b/tips/11-dom-event-listeners.ko-KR.md @@ -0,0 +1,45 @@ +--- +id: dom-event-listeners-ko-KR +title: 컴포넌트에서 DOM 이벤트 리스너 +layout: tips +permalink: dom-event-listeners-ko-KR.html +prev: props-in-getInitialState-as-anti-pattern-ko-KR.html +next: initial-ajax-ko-KR.html +--- + +> 주의: +> +> 이 글은 React에서 제공되지 않은 DOM 이벤트를 어떻게 붙이는지 설명합니다. ([더 자세한 정보는 여기에서 보세요.](/react/docs/events-ko-KR.html)). 이는 jQuery 같은 다른 라이브러리들을 통합할 때 좋습니다. + +윈도우 크기를 조절해봅시다. + +```js +var Box = React.createClass({ + getInitialState: function() { + return {windowWidth: window.innerWidth}; + }, + + handleResize: function(e) { + this.setState({windowWidth: window.innerWidth}); + }, + + componentDidMount: function() { + window.addEventListener('resize', this.handleResize); + }, + + componentWillUnmount: function() { + window.removeEventListener('resize', this.handleResize); + }, + + render: function() { + return