Paul O’Shannessy
10 years ago
34 changed files with 570 additions and 52 deletions
@ -0,0 +1,13 @@ |
|||
--- |
|||
id: introduction-ko-KR |
|||
title: 개요 |
|||
layout: tips |
|||
permalink: introduction-ko-KR.html |
|||
next: inline-styles-ko-KR.html |
|||
--- |
|||
|
|||
React 팁 섹션에서는 여러 궁금증을 해결해주고 흔히 하는 실수를 피할 수 있도록 짧은 정보들을 제공합니다. |
|||
|
|||
## 기여하기 |
|||
|
|||
[현재 팁](https://github.com/facebook/react/tree/master/docs)의 형식을 따르는 풀 리퀘스트를 [React 저장소](https://github.com/facebook/react)에 보내주세요. PR을 보내기 전에 리뷰가 필요하다면 [freenode의 #reactjs 채널](irc://chat.freenode.net/reactjs)이나 [reactjs Google 그룹](http://groups.google.com/group/reactjs)에서 도움을 요청하실 수 있습니다. |
|||
@ -0,0 +1,23 @@ |
|||
--- |
|||
id: inline-styles-ko-KR |
|||
title: 인라인 스타일 |
|||
layout: tips |
|||
permalink: inline-styles-ko-KR.html |
|||
next: if-else-in-JSX-ko-KR.html |
|||
prev: introduction-ko-KR.html |
|||
--- |
|||
|
|||
React에서는 인라인 스타일을 문자열로 지정하지 않습니다. 대신 스타일 이름을 camelCased 형식으로 바꾼 키와 스타일의 값(주로 문자열입니다 - [자세히 알아보기](/react/tips/style-props-value-px-ko-KR.html))을 가진 객체로 지정됩니다. |
|||
|
|||
```js |
|||
var divStyle = { |
|||
color: 'white', |
|||
backgroundImage: 'url(' + imgUrl + ')', |
|||
WebkitTransition: 'all', // 'W'가 대문자임에 주의하세요 |
|||
msTransition: 'all' // 'ms'는 유일한 소문자 벤더 프리픽스(vendor prefix)입니다 |
|||
}; |
|||
|
|||
React.render(<div style={divStyle}>Hello World!</div>, mountNode); |
|||
``` |
|||
|
|||
스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관성있도록 camelCased 형식입니다. (예를 들어 `node.style.backgroundImage`) [`ms`를 제외한](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) 벤더 프리픽스는 대문자로 시작해야 합니다. 따라서 `WebkitTransition`은 대문자 "W"를 사용합니다. |
|||
@ -0,0 +1,54 @@ |
|||
--- |
|||
id: if-else-in-JSX-ko-KR |
|||
title: JSX에서 If-Else |
|||
layout: tips |
|||
permalink: if-else-in-JSX-ko-KR.html |
|||
prev: inline-styles-ko-KR.html |
|||
next: self-closing-tag-ko-KR.html |
|||
--- |
|||
|
|||
JSX 안에서는 `if-else` 구문이 작동하지 않습니다. 왜냐하면 JSX가 그저 함수 호출과 객체 생성의 편의 문법이기 때문입니다. 다음의 기본적인 예제를 살펴봅시다. |
|||
|
|||
```js |
|||
// 이 JSX 코드는 |
|||
React.render(<div id="msg">Hello World!</div>, mountNode); |
|||
|
|||
// 다음의 JS 코드로 변환됩니다. |
|||
React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode); |
|||
``` |
|||
|
|||
그렇기 때문에 `if` 구문을 넣을 수 없습니다. 다음 예제를 봅시다. |
|||
|
|||
```js |
|||
// 이 JSX 코드는 |
|||
<div id={if (condition) { 'msg' }}>Hello World!</div> |
|||
|
|||
// 다음의 JS 코드로 변환됩니다. |
|||
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!"); |
|||
``` |
|||
|
|||
이는 올바른 JS가 아닙니다. 대신 삼항 연산자를 사용할 수 있습니다. |
|||
|
|||
```js |
|||
React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode); |
|||
``` |
|||
|
|||
삼항 연산자가 충분하지 않다면 `if` 문을 사용해 어떤 컴포넌트가 사용될 지 결정할 수 있습니다. |
|||
|
|||
```js |
|||
var loginButton; |
|||
if (loggedIn) { |
|||
loginButton = <LogoutButton />; |
|||
} else { |
|||
loginButton = <LoginButton />; |
|||
} |
|||
|
|||
return ( |
|||
<nav> |
|||
<Home /> |
|||
{loginButton} |
|||
</nav> |
|||
) |
|||
``` |
|||
|
|||
[JSX 컴파일러](/react/jsx-compiler.html)로 지금 바로 사용해보세요. |
|||
@ -0,0 +1,14 @@ |
|||
--- |
|||
id: self-closing-tag-ko-KR |
|||
title: 자기 자신을 닫는 태그 |
|||
layout: tips |
|||
permalink: self-closing-tag-ko-KR.html |
|||
prev: if-else-in-JSX-ko-KR.html |
|||
next: maximum-number-of-jsx-root-nodes-ko-KR.html |
|||
--- |
|||
|
|||
JSX에서 `<MyComponent>`는 유효하지 않고 `<MyComponent />`만 유효합니다. 모든 태그는 닫혀야 합니다. 자기 자신을 닫는 형식을 사용하거나 대응되는 닫는 태그(`</MyComponent>`)가 필요합니다. |
|||
|
|||
> 주의: |
|||
> |
|||
> 모든 React 컴포넌트는 자기 자신을 닫을 수 있습니다: `<div />`. `<div></div>`와 동일합니다. |
|||
@ -0,0 +1,12 @@ |
|||
--- |
|||
id: maximum-number-of-jsx-root-nodes-ko-KR |
|||
title: JSX 루트 노드의 최대 갯수 |
|||
layout: tips |
|||
permalink: maximum-number-of-jsx-root-nodes-ko-KR.html |
|||
prev: self-closing-tag-ko-KR.html |
|||
next: style-props-value-px-ko-KR.html |
|||
--- |
|||
|
|||
현재 컴포넌트의 `render`는 한 노드만 리턴할 수 있습니다. 만약 `div` 배열을 리턴하려면, `div`, `span`과 같은 다른 컴포넌트로 한 번 더 싸주어야 합니다. |
|||
|
|||
JSX는 일반 JS로 컴파일 함을 잊지말아야 합니다. 두개의 함수를 리턴하는 것은 문법적으로 맞지 않습니다. 이와 마찬가지로, 한 삼항 연산자 안에 한개 이상의 자식 컴포넌트를 넣으면 안됩니다. |
|||
@ -0,0 +1,35 @@ |
|||
--- |
|||
id: style-props-value-px-ko-KR |
|||
title: 스타일 속성에서 특정 픽셀 값 넣는 간단한 방법 |
|||
layout: tips |
|||
permalink: style-props-value-px-ko-KR.html |
|||
prev: maximum-number-of-jsx-root-nodes-ko-KR.html |
|||
next: children-props-type-ko-KR.html |
|||
--- |
|||
|
|||
인라인 `style` prop에서 픽셀 값을 넣을때, React가 자동으로 숫자뒤에 "px"를 붙여줍니다. 다음과 같이 동작합니다: |
|||
|
|||
```js |
|||
var divStyle = {height: 10}; // "height:10px" 로 렌더링 됩니다. |
|||
React.render(<div style={divStyle}>Hello World!</div>, mountNode); |
|||
``` |
|||
|
|||
더 자세한 이야기는 [Inline Styles](/react/tips/inline-styles-ko-KR.html)를 참고해 주시기 바랍니다. |
|||
|
|||
개발 하다보면 CSS 속성들이 단위 없이 그대로 유지되어야 할 때가 있을 겁니다. 아래의 프로퍼티들은 자동으로 "px"가 붙지 않는 속성 리스트 입니다: |
|||
|
|||
- `columnCount` |
|||
- `fillOpacity` |
|||
- `flex` |
|||
- `flexGrow` |
|||
- `flexShrink` |
|||
- `fontWeight` |
|||
- `lineClamp` |
|||
- `lineHeight` |
|||
- `opacity` |
|||
- `order` |
|||
- `orphans` |
|||
- `strokeOpacity` |
|||
- `widows` |
|||
- `zIndex` |
|||
- `zoom` |
|||
@ -0,0 +1,49 @@ |
|||
--- |
|||
id: children-props-type-ko-KR |
|||
title: 자식 속성들의 타입 |
|||
layout: tips |
|||
permalink: children-props-type-ko-KR.html |
|||
prev: style-props-value-px-ko-KR.html |
|||
next: controlled-input-null-value-ko-KR.html |
|||
--- |
|||
|
|||
컴포넌트의 자식들(`this.props.children`)은 대부분 컴포넌트의 배열로 들어갑니다: |
|||
|
|||
```js |
|||
var GenericWrapper = React.createClass({ |
|||
componentDidMount: function() { |
|||
console.log(Array.isArray(this.props.children)); // => true |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div />; |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<GenericWrapper><span/><span/><span/></GenericWrapper>, |
|||
mountNode |
|||
); |
|||
``` |
|||
|
|||
하지만 자식이 하나만 있는 경우, `this.props.children`는 _배열 래퍼(wrapper)없이_ 싱글 자식 컴포넌트가 됩니다. 이렇게 함으로써 배열 할당을 줄일 수 있습니다. |
|||
|
|||
```js |
|||
var GenericWrapper = React.createClass({ |
|||
componentDidMount: function() { |
|||
console.log(Array.isArray(this.props.children)); // => false |
|||
|
|||
// 경고 : 산출된 5 값은 'hello' 스트링의 길이 입니다. 존재하지 않는 배열 래퍼의 길이인 1이 아닙니다! |
|||
|
|||
console.log(this.props.children.length); |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div />; |
|||
} |
|||
}); |
|||
|
|||
React.render(<GenericWrapper>hello</GenericWrapper>, mountNode); |
|||
``` |
|||
|
|||
`this.props.children`을 쉽게 다룰 수 있도록 [React.Children utilities](/react/docs/top-level-api-ko-KR.html#react.children)를 제공하고 있습니다. |
|||
@ -0,0 +1,22 @@ |
|||
--- |
|||
id: controlled-input-null-value-ko-KR |
|||
title: 제어되는 input 내의 null 값 |
|||
layout: tips |
|||
permalink: controlled-input-null-value-ko-KR.html |
|||
prev: children-props-type-ko-KR.html |
|||
next: componentWillReceiveProps-not-triggered-after-mounting-ko-KR.html |
|||
--- |
|||
|
|||
[제어되는 컴포넌트들](/react/docs/forms-ko-KR.html)의 `value` 속성 값을 지정하면 유저에 의해 입력값을 바꿀 수 없습니다. |
|||
|
|||
`value`가 정해져 있는데도 입력값을 변경할 수 있는 문제를 겪고 있다면 실수로 `value`를 `undefined`나 `null`로 설정한 것일 수 있습니다. |
|||
|
|||
아래 짧은 예제가 있습니다; 렌더링 후, 잠시 뒤에 텍스트를 고칠 수 있는 상태가 되는 것을 확인 하실 수 있습니다. |
|||
|
|||
```js |
|||
React.render(<input value="hi" />, mountNode); |
|||
|
|||
setTimeout(function() { |
|||
React.render(<input value={null} />, mountNode); |
|||
}, 1000); |
|||
``` |
|||
@ -0,0 +1,13 @@ |
|||
--- |
|||
id: componentWillReceiveProps-not-triggered-after-mounting-ko-KR |
|||
title: 마운트 후에는 componentWillReceiveProps가 실행되지 않음. |
|||
layout: tips |
|||
permalink: componentWillReceiveProps-not-triggered-after-mounting-ko-KR.html |
|||
prev: controlled-input-null-value-ko-KR.html |
|||
next: props-in-getInitialState-as-anti-pattern-ko-KR.html |
|||
--- |
|||
|
|||
`componentWillReceiveProps`는 노드가 더해진 후엔 실행되지 않습니다. 이는 설계에 의한 것입니다. [다른 생명주기 메소드](/react/docs/component-specs-ko-KR.html)에서 요구사항에 적합한 것을 찾아보세요. |
|||
|
|||
이러한 이유는 `componentWillReceiveProps`에 종종 예전 props와 액션의 차이를 비교하는 로직이 들어가기 때문입니다. 마운트할 때 트리거되지 않으면, (예전 props가 없다고 해도) 메소드의 형태를 구별하는 데 도움이 됩니다. |
|||
|
|||
@ -0,0 +1,67 @@ |
|||
--- |
|||
id: props-in-getInitialState-as-anti-pattern-ko-KR |
|||
title: getInitialState의 Props는 안티패턴 |
|||
layout: tips |
|||
permalink: props-in-getInitialState-as-anti-pattern-ko-KR.html |
|||
prev: componentWillReceiveProps-not-triggered-after-mounting-ko-KR.html |
|||
next: dom-event-listeners-ko-KR.html |
|||
--- |
|||
|
|||
> 주의 : |
|||
> |
|||
> 이것은 React에만 국한된 팁이 아니고 안티패턴은 평범한 코드 속 에서도 종종 발생합니다. 이 글에서는 React로 간단하게 설명해 보겠습니다. |
|||
|
|||
부모로부터 받은 props를 이용하여 `getInitialState`에서 state를 생성할 때 종종 "진실의 소스", 예를 들어 진짜 데이터가 있는 곳을 중복으로 만들 때가 있습니다. 가능하던 안하던, 나중에 싱크되지 않는 확실한 값을 계산하고 또한 유지보수에도 문제를 야기합니다. |
|||
|
|||
**나쁜 예제:** |
|||
|
|||
```js |
|||
var MessageBox = React.createClass({ |
|||
getInitialState: function() { |
|||
return {nameWithQualifier: 'Mr. ' + this.props.name}; |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div>{this.state.nameWithQualifier}</div>; |
|||
} |
|||
}); |
|||
|
|||
React.render(<MessageBox name="Rogers"/>, mountNode); |
|||
``` |
|||
|
|||
더 나은 코드: |
|||
|
|||
```js |
|||
var MessageBox = React.createClass({ |
|||
render: function() { |
|||
return <div>{'Mr. ' + this.props.name}</div>; |
|||
} |
|||
}); |
|||
|
|||
React.render(<MessageBox name="Rogers"/>, mountNode); |
|||
``` |
|||
|
|||
(복잡한 로직이라, 메소드에서 계산하는 부분만 떼어 왔습니다.) |
|||
|
|||
하지만 여기서 싱크를 맞출 목적이 아님을 명확히 할 수 있다면, 이것은 안티 패턴이 **아닙니다.** |
|||
|
|||
|
|||
|
|||
```js |
|||
var Counter = React.createClass({ |
|||
getInitialState: function() { |
|||
// initial로 시작하는 메소드는 내부에서 받은 어떠한 값을 초기화 할 목적이 있다는 것을 나타냅니다. |
|||
return {count: this.props.initialCount}; |
|||
}, |
|||
|
|||
handleClick: function() { |
|||
this.setState({count: this.state.count + 1}); |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div onClick={this.handleClick}>{this.state.count}</div>; |
|||
} |
|||
}); |
|||
|
|||
React.render(<Counter initialCount={7}/>, mountNode); |
|||
``` |
|||
@ -0,0 +1,41 @@ |
|||
--- |
|||
id: communicate-between-components-ko-KR |
|||
title: 컴포넌트간의 통신 |
|||
layout: tips |
|||
permalink: communicate-between-components-ko-KR.html |
|||
prev: false-in-jsx-ko-KR.html |
|||
next: expose-component-functions-ko-KR.html |
|||
--- |
|||
|
|||
부모-자식 통신을 위해서는, 간단히 [props를 넘기면 됩니다](/react/docs/multiple-components-ko-KR.html). |
|||
|
|||
자식-부모 통신을 위해서는: |
|||
`GroceryList` 컴포넌트가 배열로 생성된 아이템 목록을 가지고 있다고 해봅시다. 목록의 아이템이 클릭되면 아이템의 이름이 보이길 원할 겁니다: |
|||
|
|||
```js |
|||
var GroceryList = React.createClass({ |
|||
handleClick: function(i) { |
|||
console.log('클릭한 아이템: ' + this.props.items[i]); |
|||
}, |
|||
|
|||
render: function() { |
|||
return ( |
|||
<div> |
|||
{this.props.items.map(function(item, i) { |
|||
return ( |
|||
<div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div> |
|||
); |
|||
}, this)} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode ); |
|||
``` |
|||
|
|||
`bind(this, arg1, arg2, ...)`의 사용을 확인하세요: 간단히 `handleClick`에 인자를 더 넘겼습니다. 이는 React의 새로운 컨셉이 아닙니다; 그냥 JavaScript죠. |
|||
|
|||
부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다. |
|||
`componentDidMount()`에서 이벤트를 구독하고, `componentWillUnmount()`에서 해제합니다. 이벤트를 받으면 `setState()`를 호출합니다. |
|||
@ -0,0 +1,59 @@ |
|||
--- |
|||
id: expose-component-functions-ko-KR |
|||
title: 컴포넌트 함수 드러내기 |
|||
layout: tips |
|||
permalink: expose-component-functions-ko-KR.html |
|||
prev: communicate-between-components-ko-KR.html |
|||
next: references-to-components-ko-KR.html |
|||
--- |
|||
|
|||
[컴포넌트간의 통신](/react/tips/communicate-between-components-ko-KR.html)을 위한 (일반적이지 않은) 또다른 방법이 있습니다: 단순히 부모의 호출을 위해 자식 컴포넌트의 메소드를 노출하는 겁니다. |
|||
|
|||
할일 목록을 생각해보죠. 아이템을 클릭하면 제거되고, 하나가 남으면 애니메이션 효과를 줍니다: |
|||
|
|||
```js |
|||
var Todo = React.createClass({ |
|||
render: function() { |
|||
return <div onClick={this.props.onClick}>{this.props.title}</div>; |
|||
}, |
|||
|
|||
//이 컴포넌트는 `ref` 어트리뷰트를 통해 부모에게 다뤄질 것입니다 |
|||
animate: function() { |
|||
console.log('%s이 애니메이팅하는것처럼 속입니다', this.props.title); |
|||
} |
|||
}); |
|||
|
|||
var Todos = React.createClass({ |
|||
getInitialState: function() { |
|||
return {items: ['사과', '바나나', '크랜베리']}; |
|||
}, |
|||
|
|||
handleClick: function(index) { |
|||
var items = this.state.items.filter(function(item, i) { |
|||
return index !== i; |
|||
}); |
|||
this.setState({items: items}, function() { |
|||
if (items.length === 1) { |
|||
this.refs.item0.animate(); |
|||
} |
|||
}.bind(this)); |
|||
}, |
|||
|
|||
render: function() { |
|||
return ( |
|||
<div> |
|||
{this.state.items.map(function(item, i) { |
|||
var boundClick = this.handleClick.bind(this, i); |
|||
return ( |
|||
<Todo onClick={boundClick} key={i} title={item} ref={'item' + i} /> |
|||
); |
|||
}, this)} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render(<Todos />, mountNode); |
|||
``` |
|||
|
|||
다른 방법으로는, `isLastUnfinishedItem` prop을 `todo`에 넘기는 방식으로 원하는 바를 이룰수도 있습니다. `componentDidUpdate`에서 prop을 확인하고 스스로 애니메이션 효과를 주는겁니다; 하지만 애니메이션 제어를 위해 다른 prop들을 넘기게 되면 이는 금새 난잡해질 수 있습니다. |
|||
@ -0,0 +1,28 @@ |
|||
--- |
|||
id: references-to-components-ko-KR |
|||
title: 컴포넌트 참조 |
|||
layout: tips |
|||
permalink: references-to-components-ko-KR.html |
|||
prev: expose-component-functions-ko-KR.html |
|||
next: children-undefined-ko-KR.html |
|||
--- |
|||
|
|||
애플리케이션의 일부에서만 React 컴포넌트를 사용중이거나 코드를 React로 전환하고 있다면, 컴포넌트의 참조를 보존할 필요가 있을 것입니다. `React.render`는 마운트된 컴포넌트의 참조를 반환합니다: |
|||
|
|||
```js |
|||
var myComponent = React.render(<MyComponent />, myContainer); |
|||
``` |
|||
|
|||
명심하세요, JSX는 컴포넌트 인스턴스를 반환하지 않습니다! 단지 마운트된 컴포넌트가 어떻게 보일지 알려주는 간단한 서술인 **ReactElement**일 뿐입니다. |
|||
|
|||
```js |
|||
var myComponentElement = <MyComponent />; // ReactElement일 뿐입니다. |
|||
|
|||
// 코드들이 여기 위치하게 됩니다... |
|||
|
|||
var myComponentInstance = React.render(myComponentElement, myContainer); |
|||
``` |
|||
|
|||
> 주의: |
|||
> |
|||
> 이는 최상위 레벨에서만 사용되어야 합니다. 컴포넌트의 내부에서는 `prop`과 `state`가 자식컴포넌트와의 통신을 제어하며, [refs](http://facebook.github.io/react/docs/more-about-refs-ko-KR.html)를 통해서만 컴포넌트를 참조할 수 있습니다. |
|||
@ -0,0 +1,28 @@ |
|||
--- |
|||
id: children-undefined-ko-KR |
|||
title: 정의되지 않은 this.props.children |
|||
layout: tips |
|||
permalink: children-undefined-ko-KR.html |
|||
prev: references-to-components-ko-KR.html |
|||
next: use-react-with-other-libraries-ko-KR.html |
|||
--- |
|||
|
|||
`this.props.children`을 통해 자식 컴포넌트에 접근할 수 없습니다. `this.props.children`은 소유자에 의해 자식이 **전달**되도록 지정합니다: |
|||
|
|||
```js |
|||
var App = React.createClass({ |
|||
componentDidMount: function() { |
|||
// 이는 `span`을 참조하지 않습니다! |
|||
// 마지막 줄의 `<App></App>` 사이의 정의되지 않은 자식을 참조합니다. |
|||
console.log(this.props.children); |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div><span/><span/></div>; |
|||
} |
|||
}); |
|||
|
|||
React.render(<App></App>, mountNode); |
|||
``` |
|||
|
|||
괜찮은 예제들을 더 알아보려면, [프론트 페이지](/)의 마지막 예제를 참고하세요. |
|||
@ -0,0 +1,39 @@ |
|||
--- |
|||
id: use-react-with-other-libraries-ko-KR |
|||
title: React와 다른 라이브러리를 함께 사용하기 |
|||
layout: tips |
|||
permalink: use-react-with-other-libraries-ko-KR.html |
|||
prev: children-undefined-ko-KR.html |
|||
next: dangerously-set-inner-html-ko-KR.html |
|||
--- |
|||
|
|||
React만으로 만들 필요는 없습니다. 컴포넌트의 [생명주기 이벤트](/react/docs/component-specs-ko-KR.html#lifecycle-methods), 특히 `componentDidMount`와 `componentDidUpdate`는 다른 라이브러리들의 로직을 넣기에 좋은 장소입니다. |
|||
|
|||
```js |
|||
var App = React.createClass({ |
|||
getInitialState: function() { |
|||
return {myModel: new myBackboneModel({items: [1, 2, 3]})}; |
|||
}, |
|||
|
|||
componentDidMount: function() { |
|||
$(this.refs.placeholder.getDOMNode()).append($('<span />')); |
|||
}, |
|||
|
|||
componentWillUnmount: function() { |
|||
// 정리는 여기서 합니다 |
|||
}, |
|||
|
|||
shouldComponentUpdate: function() { |
|||
// 이 컴포넌트를 다시는 업데이트하지 않도록 하죠. |
|||
return false; |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div ref="placeholder"/>; |
|||
} |
|||
}); |
|||
|
|||
React.render(<App />, mountNode); |
|||
``` |
|||
|
|||
이 방식으로 별도의 [이벤트 리스너](/react/tips/dom-event-listeners-ko-KR.html)나 [이벤트 스트림](https://baconjs.github.io) 같은 것들을 더할 수 있습니다. |
|||
Loading…
Reference in new issue