You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

40 lines
1.3 KiB

---
id: use-react-with-other-libraries-ko-KR
title: React와 다른 라이브러리를 함께 사용하기
layout: tips
Upgrade to Jekyll 3 Full list of changes is at https://jekyllrb.com/docs/upgrading/2-to-3/. The tl;dr of it is: - Relative permalinks were removed, so all the files in the `docs` subdirectory need their permalink to be prefixed with `docs/` - `post` and `page` types were renamed to `posts` and `pages` respectively - `jekyll-paginate`, `pygments` and `redcarpet` are all now optional, so I needed to explicitly add it to the Gemfile. Jekyll now uses `rouge` rather than `pygments` for syntax highlighting, but rouge does not support highlighting individual lines (`hl_lines`) so we need to continue using Pygments. - Layout metadata (eg. `sectionid`) is now on a `layout` variable rather than `page` Tested the following pages and confirmed that they all work: - "Docs" link (getting started page): http://127.0.0.1:4000/react/docs/getting-started.html - Downloads: http://127.0.0.1:4000/react/downloads.html - Tutorial: http://127.0.0.1:4000/react/docs/tutorial.html - A few pages under the "docs" subdirectory, to confirm they're working properly: - http://127.0.0.1:4000/react/docs/addons.html - http://127.0.0.1:4000/react/docs/why-react.html - http://127.0.0.1:4000/react/docs/create-fragment.html - A few tips: - http://127.0.0.1:4000/react/tips/false-in-jsx.html - http://127.0.0.1:4000/react/tips/style-props-value-px.html - Non-English versions of the page: - http://127.0.0.1:4000/react/docs/getting-started-it-IT.html - http://127.0.0.1:4000/react/docs/getting-started-ja-JP.html
9 years ago
permalink: tips/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).append($('<span />'));
},
componentWillUnmount: function() {
// 정리는 여기서 합니다
},
shouldComponentUpdate: function() {
// 이 컴포넌트를 다시는 업데이트하지 않도록 하죠.
return false;
},
render: function() {
return <div ref="placeholder"/>;
}
});
ReactDOM.render(<App />, mountNode);
```
이 방식으로 별도의 [이벤트 리스너](/react/tips/dom-event-listeners-ko-KR.html)나 [이벤트 스트림](https://baconjs.github.io) 같은 것들을 더할 수 있습니다.