Merge pull request #3537 from marocchino/korean-update
Update Korean translations
This commit is contained in:
Paul O’Shannessy
commit
0c2238bb72
|
|
@ -105,7 +105,7 @@ JSX는 완전히 선택적입니다. 당신은 React와 JSX를 함께 사용하
|
|||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
편의를 위하여, 당신은 팩토리 함수 헬퍼들을 이용해 커스텀 컴포넌트로부터 엘리먼트들을 만들 수 있습니다.
|
||||
|
|
@ -114,7 +114,7 @@ React.render(root, document.body);
|
|||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React는 이미 일반적인 HTML 태그에 대한 빌트인 팩토리를 가지고 있습니다.
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세
|
|||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
React.render(myDivElement, document.body);
|
||||
React.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.
|
||||
|
|
@ -34,7 +34,7 @@ React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수
|
|||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
React.render(myElement, document.body);
|
||||
React.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ JSX는 HTML처럼 보이지만, 작업하다 보면 마주치게 될 몇 가지
|
|||
|
||||
> 주의:
|
||||
>
|
||||
> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/react/docs/dom-differences-ko-KR.html)를 보세요.
|
||||
> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/react/tips/dangerously-set-inner-html-ko-KR.html)를 보세요.
|
||||
|
||||
## HTML 엔티티
|
||||
|
||||
|
|
|
|||
|
|
@ -40,8 +40,6 @@ React.render(
|
|||
|
||||
React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 [W3C 사양](http://www.w3.org/TR/DOM-Level-3-Events/)과 같도록 보장됩니다.
|
||||
|
||||
React를 폰이나 테블릿같은 터치 디바이스에서 사용하려 한다면, 간단히 `React.initializeTouchEvents(true);`로 터치 이벤트 핸들링을 켜면 됩니다.
|
||||
|
||||
|
||||
## 기본 구현: 오토바인딩과 이벤트 델리게이션
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트
|
|||
|
||||
### 자식 Reconciliation (비교조정)
|
||||
|
||||
**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 랜더 패스가 있다고 해봅시다.
|
||||
**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 렌더 패스가 있다고 해봅시다.
|
||||
|
||||
```html
|
||||
// Render Pass 1
|
||||
|
|
@ -115,7 +115,7 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트
|
|||
<a name="dynamic-children"></a>
|
||||
### 동적 자식
|
||||
|
||||
자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 랜더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다.
|
||||
자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 렌더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ React.createClass({
|
|||
optionalString: React.PropTypes.string,
|
||||
|
||||
// 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소
|
||||
// 이것들을 포함하는 배열이나 엘리먼트
|
||||
// 이것들을 포함하는 배열(이나 프래그먼트)
|
||||
optionalNode: React.PropTypes.node,
|
||||
|
||||
// React 엘리먼트
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ React.render(
|
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
세상아 안녕!
|
||||
</FancyCheckbox>,
|
||||
document.body
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ React.render(
|
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
세상아 안녕!
|
||||
</FancyCheckbox>,
|
||||
document.body
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의
|
|||
}
|
||||
```
|
||||
|
||||
이것은 빈 값으로 시작되는 input을 랜더합니다. 임의의 사용자 입력은 즉시 렌더된 엘리먼트에 반영됩니다. 값의 업데이트를 감시하길 원한다면, 제어되는 컴포넌트처럼 `onChange` 이벤트를 사용할 수 있습니다.
|
||||
이것은 빈 값으로 시작되는 input을 렌더합니다. 임의의 사용자 입력은 즉시 렌더된 엘리먼트에 반영됩니다. 값의 업데이트를 감시하길 원한다면, 제어되는 컴포넌트처럼 `onChange` 이벤트를 사용할 수 있습니다.
|
||||
|
||||
비어 있지 않은 값으로 초기화하길 원한다면, `defaultValue` prop로 할 수 있습니다. 예를 들어,
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ next: animation-ko-KR.html
|
|||
- [`createFragment`](create-fragment-ko-KR.html)는 외부에서 키가 할당된 자식들의 모음을 만듭니다.
|
||||
- [`update`](update-ko-KR.html)는 JavaScript안에서 불변 데이터를 다루기 쉽게하는 헬퍼 함수입니다.
|
||||
- [`PureRenderMixin`](pure-render-mixin-ko-KR.html)는 특정 상황에서 성능을 향상시켜 줍니다.
|
||||
- (비 추천) [`classSet`](class-name-manipulation-ko-KR.html)는 좀 더 알기 쉽게 DOM `class` 문자열을 다룹니다.
|
||||
|
||||
밑에 있는 애드온은 React 개발 (압축되지 않은) 버전에서만 사용가능 합니다.
|
||||
|
||||
|
|
|
|||
|
|
@ -144,9 +144,17 @@ var ImageCarousel = React.createClass({
|
|||
|
||||
`ReactTransitionGroup`은 애니메이션의 기초입니다. 이는 `React.addons.TransitionGroup`으로 접근할 수 있습니다. 위에 있는 예제처럼 자식들이 선언적으로 여기에 추가되거나 삭제되는 경우, 특별한 훅이 이 생명주기에서 호출됩니다.
|
||||
|
||||
### `componentWillAppear(callback)`
|
||||
|
||||
이미 있는 `TransitionGroup`에 컴포넌트를 추가할 때 호출되는 `componentDidMount()`와 같이 호출됩니다. 이는 `callback`이 호출될 때까지 다른 애니메이션을 막습니다. `TransitionGroup`의 최초 렌더에서만 호출됩니다.
|
||||
|
||||
### `componentDidAppear()`
|
||||
|
||||
이는 `componentWillAppear`에 넘겨졌던 `callback` 함수가 호출된 다음에 호출됩니다.
|
||||
|
||||
### `componentWillEnter(callback)`
|
||||
|
||||
이는 이미 있는 `TransitionGroup`에 컴포넌트를 추가할 때 호출되는 `componentDidMount()`와 같이 호출됩니다. 이는 `callback`이 호출될 때까지 다른 애니메이션을 막습니다. `TransitionGroup`의 최조 렌더에서는 불려지지 않습니다.
|
||||
이미 있는 `TransitionGroup`에 컴포넌트를 추가할 때 호출되는 `componentDidMount()`와 같이 호출됩니다. 이는 `callback`이 호출될 때까지 다른 애니메이션을 막습니다. `TransitionGroup`의 최조 렌더에서는 불려지지 않습니다.
|
||||
|
||||
### `componentDidEnter()`
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ id: two-way-binding-helpers-ko-KR
|
|||
title: 양방향 바인딩 핼퍼
|
||||
permalink: two-way-binding-helpers-ko-KR.html
|
||||
prev: animation-ko-KR.html
|
||||
next: class-name-manipulation-ko-KR.html
|
||||
next: test-utils-ko-KR.html
|
||||
---
|
||||
|
||||
`ReactLink`는 React에서 양방향 바인딩을 표현하는 쉬운 방법입니다.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
id: test-utils-ko-KR
|
||||
title: 테스트 유틸리티
|
||||
permalink: test-utils-ko-KR.html
|
||||
prev: class-name-manipulation-ko-KR.html
|
||||
prev: two-way-binding-helpers-ko-KR.html
|
||||
next: clone-with-props-ko-KR.html
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ boolean isValidElement(* object)
|
|||
```javascript
|
||||
DOMElement findDOMNode(ReactComponent component)
|
||||
```
|
||||
이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. `render`가 `null`이나 `false`를 리턴할 때 `React.findDOMNode()`는 `null`을 리턴합니다.
|
||||
이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. `render`가 `null`이나 `false`를 리턴할 때 `findDOMNode()`는 `null`을 리턴합니다.
|
||||
|
||||
|
||||
### React.DOM
|
||||
|
|
@ -145,15 +145,6 @@ DOMElement findDOMNode(ReactComponent component)
|
|||
`React.PropTypes`는 컴포넌트에 넘어오는 props가 올바른지 검사할 수 있는 컴포넌트의 `propTypes` 객체에 들어가는 타입을 가집니다. `propTypes`에 대한 자세한 정보는 [재사용 가능한 컴포넌트](/react/docs/reusable-components-ko-KR.html)를 참고하세요.
|
||||
|
||||
|
||||
### React.initializeTouchEvents
|
||||
|
||||
```javascript
|
||||
initializeTouchEvents(boolean shouldUseTouch)
|
||||
```
|
||||
|
||||
React의 이벤트 시스템이 모바일 기기의 터치 이벤트를 처리하도록 설정합니다.
|
||||
|
||||
|
||||
### React.Children
|
||||
|
||||
`React.Children`은 불투명한 자료 구조인 `this.props.children`를 다룰 수 있는 유틸리티를 제공합니다.
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ string displayName
|
|||
`displayName` 문자열은 디버그 메시지에 사용됩니다. JSX는 이 값을 자동으로 설정합니다. [JSX 깊이 알기](/react/docs/jsx-in-depth-ko-KR.html#the-transform)를 참고하세요.
|
||||
|
||||
|
||||
<a name="lifecycle-methods"></a>
|
||||
## 생명주기 메소드
|
||||
|
||||
컴포넌트의 생명주기에서 특정 시점마다 실행되는 메소드들입니다.
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ formAction formEncType formMethod formNoValidate formTarget frameBorder height
|
|||
hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest
|
||||
marginHeight marginWidth max maxLength media mediaGroup method min multiple
|
||||
muted name noValidate open pattern placeholder poster preload radioGroup
|
||||
readOnly rel required role rows rowSpan sandbox scope scrolling seamless
|
||||
readOnly rel required role rows rowSpan sandbox scope scoped scrolling seamless
|
||||
selected shape size sizes span spellCheck src srcDoc srcSet start step style
|
||||
tabIndex target title type useMap value width wmode
|
||||
```
|
||||
|
|
|
|||
|
|
@ -140,9 +140,6 @@ boolean shiftKey
|
|||
|
||||
### 터치 이벤트
|
||||
|
||||
터치 이벤트를 활성화 하려면, 컴포넌트를 렌더하기 전에
|
||||
`React.initializeTouchEvents(true)`를 호출하세요.
|
||||
|
||||
이벤트 이름:
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ var root = React.createElement('div');
|
|||
DOM에 새로운 트리를 렌더링하기 위해서는 `ReactElement`를 만들고 일반적인 DOM `Element` (`HTMLElement` 또는 `SVGElement`)와 함께 `React.render`에 넘깁니다. `ReactElement`를 DOM `Element`와 혼동해서는 안됩니다. `ReactElement`는 가볍고, 상태를 갖지 않으며, 변경 불가능한, DOM `Element`의 가상 표현입니다. 즉 가상 DOM입니다.
|
||||
|
||||
```javascript
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로퍼티 객체를, 세번째 인자로 자식을 넘깁니다.
|
||||
|
|
@ -32,7 +32,7 @@ DOM 엘리먼트에 프로퍼티를 추가하려면 두번째 인자로 프로
|
|||
```javascript
|
||||
var child = React.createElement('li', null, 'Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child);
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React JSX를 사용하면 `ReactElement`가 알아서 만들어집니다. 따라서 다음 코드는 앞의 코드와 같습니다:
|
||||
|
|
@ -41,7 +41,7 @@ React JSX를 사용하면 `ReactElement`가 알아서 만들어집니다. 따라
|
|||
var root = <ul className="my-list">
|
||||
<li>Text Content</li>
|
||||
</ul>;
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
__팩토리__
|
||||
|
|
@ -49,7 +49,7 @@ __팩토리__
|
|||
`ReactElement` 팩토리는 그저 특정한 `type` 프로퍼티를 가지는 `ReactElement`를 만들어주는 함수입니다. React에는 팩토리를 만드는 헬퍼가 내장되어 있습니다. 그 함수는 사실상 다음과 같습니다:
|
||||
|
||||
```javascript
|
||||
function createFactory(type){
|
||||
function createFactory(type) {
|
||||
return React.createElement.bind(null, type);
|
||||
}
|
||||
```
|
||||
|
|
@ -59,7 +59,7 @@ function createFactory(type){
|
|||
```javascript
|
||||
var div = React.createFactory('div');
|
||||
var root = div({ className: 'my-div' });
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React에는 이미 보통의 HTML 태그를 위한 팩토리가 내장되어 있습니다:
|
||||
|
|
@ -122,14 +122,14 @@ var element = <MyComponent />;
|
|||
이것이 `React.render`에 넘겨지면 React가 알아서 생성자를 호출하여 `ReactComponent`를 만들고 리턴합니다.
|
||||
|
||||
```javascript
|
||||
var component = React.render(element, document.body);
|
||||
var component = React.render(element, document.getElementById('example'));
|
||||
```
|
||||
|
||||
같은 타입의 `ReactElement`와 같은 컨테이너 DOM `Element`를 가지고 `React.render`를 계속 호출하면 항상 같은 인스턴스를 리턴합니다. 이 인스턴스는 상태를 가집니다.
|
||||
|
||||
```javascript
|
||||
var componentA = React.render(<MyComponent />, document.body);
|
||||
var componentB = React.render(<MyComponent />, document.body);
|
||||
var componentA = React.render(<MyComponent />, document.getElementById('example'));
|
||||
var componentB = React.render(<MyComponent />, document.getElementById('example'));
|
||||
componentA === componentB; // true
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ next: thinking-in-react-ko-KR.html
|
|||
<title>Hello React</title>
|
||||
<script src="http://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
|
||||
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
|
|
|
|||
|
|
@ -8,28 +8,34 @@ next: complementary-tools-ko-KR.html
|
|||
|
||||
### Rethinking best practices - JSConf.eu
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
"페이스북과 인스타그램에서, 우리는 React 를 이용해 웹에서 벌어질 수 있는 한계를 뛰어넘으려 노력하고 있습니다. 저는 프레임워크에 대한 짤막한 소개로 시작해서, 논쟁이 벌어질 수 있는 다음의 세가지 주제로 넘어갈겁니다. 템플릿의 개념을 버리고 Javascript 를 이용해 View 를 구축하기, 자료가 변할때 전체 어플리케이션을 다시 그리기(“re-rendering”), 그리고 DOM과 events의 경량화된 구현 입니다." -- [Pete Hunt](http://www.petehunt.net/)
|
||||
|
||||
* * *
|
||||
|
||||
### Thinking in react - tagtree.tv
|
||||
|
||||
[tagtree.tv](http://tagtree.tv/)의 비디오는 간단한 어플리케이션을 구성하면서 [Thinking in React](/react/docs/thinking-in-react-ko-KR.html)의 원리들을 전달합니다.
|
||||
<figure>[](http://tagtree.tv/thinking-in-react)</figure>
|
||||
|
||||
* * *
|
||||
|
||||
### Secrets of the Virtual DOM - MtnWest JS
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
"이번에는 왜 우리가 virtual DOM을 만들었는지, 이것이 다른 시스템들과는 어떻게 다른지, 그리고 브라우져 기술들의 미래와 어떻게 관련이 있는지에 대해서 이야기 해 볼 겁니다." -- [Pete Hunt](http://www.petehunt.net/)
|
||||
|
||||
* * *
|
||||
|
||||
### Going big with React
|
||||
|
||||
"이 발표에서, 이 모든 JS 프레임워크가 다음을 약속하는것처럼 보입니다: 꺠끗한 구현들, 빠른 코드 디자인, 완전한 수행. 그런데 당신이 Javascript 스트레스 테스트를 할때, 어떤 일이 발생합니까? 혹은 6MB의 코드를 던지면 무슨일이 발생합니까? 이번에는 높은 스트레스 환경에서 React가 어떻게 작동하는지, 그리고 이것이 우리 팀이 방대한 크기의 코드를 안전하게 구성하는데 어떻게 도움이 되어줄지를 조사해 볼겁니다."
|
||||
[](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)
|
||||
|
||||
* * *
|
||||
|
||||
### CodeWinds
|
||||
|
||||
CodeWinds Episode 4 에서 [Pete Hunt](http://www.petehunt.net/)와 [Jeff Barczewski](http://jeff.barczewski.com/)가 React에 대해서 이야기 합니다.
|
||||
|
|
@ -62,6 +68,7 @@ CodeWinds Episode 4 에서 [Pete Hunt](http://www.petehunt.net/)와 [Jeff Barcze
|
|||
|
||||
[방송 자료 읽어보기](http://codewinds.com/4)
|
||||
|
||||
* * *
|
||||
|
||||
### JavaScript Jabber
|
||||
|
||||
|
|
@ -90,58 +97,78 @@ Javascript Jabber 73에서 [Pete Hunt](http://www.petehunt.net/)와 [Jordan Walk
|
|||
|
||||
[전체 기록 읽어보기](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
|
||||
|
||||
* * *
|
||||
|
||||
### Introduction to React.js - Facebook Seattle
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
By [Tom Occhino](http://tomocchino.com/), [Jordan Walke](https://github.com/jordwalke)
|
||||
|
||||
* * *
|
||||
|
||||
### Backbone + React + Middleman Screencast
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="488" src="https://www.youtube.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
Backbone은 React로 REST API를 제공하기 위한 아주 좋은 방법입니다. 이 화면중개는 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)을 이용해서 어떻게 이 두가지를 병합하는지 보여줍니다. Middleman은 이 예제에서 사용되는 프레임워크이지만, 쉽게 다른 프레임워크로 대체하실 수 있습니다. 지원되는 템플릿은 [이곳](https://github.com/jbhatab/middleman-backbone-react-template)에서 찾으실 수 있습니다. -- [열린 마음의 혁명들](http://www.openmindedinnovations.com/)
|
||||
|
||||
* * *
|
||||
|
||||
### Developing User Interfaces With React - Super VanJS
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
By [Steven Luscher](https://github.com/steveluscher)
|
||||
|
||||
* * *
|
||||
|
||||
### Introduction to React - LAWebSpeed meetup
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
by [Stoyan Stefanov](http://www.phpied.com/)
|
||||
|
||||
* * *
|
||||
|
||||
### React, or how to make life simpler - FrontEnd Dev Conf '14
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="366" src="https://www.youtube.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
**러시아어** by [Alexander Solovyov](http://solovyov.net/)
|
||||
|
||||
* * *
|
||||
|
||||
### "Functional DOM programming" - Meteor DevShop 11
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
* * *
|
||||
|
||||
### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
* * *
|
||||
|
||||
### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
Facebook 개발자 [Bill Fisher](http://twitter.com/fisherwebdev)와 [Jing Chen](http://twitter.com/jingc)가 Flux 와 React 에 대해서 이야기합니다. 그리고 어떻게 단일 방향의 자료흐름을 사용하는 어플리케이션 구조가 방대한 코드를 정리하는지에 대해서 이야기합니다."
|
||||
|
||||
* * *
|
||||
|
||||
### Server-Side Rendering of Isomorphic Apps at SoundCloud
|
||||
|
||||
<iframe src="//player.vimeo.com/video/108488724" width="500" height="281" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe src="https://player.vimeo.com/video/108488724" width="650" height="365" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
Server-side rendering을 위해 [SoundCloud](https://developers.soundcloud.com/blog/)가 React 와 Flux를 사용하는지 by [Andres Suarez](https://github.com/zertosh)
|
||||
[발표 자료와 예제 코드](https://github.com/zertosh/ssr-demo-kit)
|
||||
|
||||
* * *
|
||||
|
||||
### Introducing React Native (+Playlist) - React.js Conf 2015
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/watch?v=KVZ-P-ZI6W4&index=1&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="https://www.youtube.com/watch?v=KVZ-P-ZI6W4&index=1&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
2015년에 [Tom Occhino](https://twitter.com/tomocchino)님이 React의 과거와 현재를 리뷰하고 나아갈 방향을 제시했습니다.
|
||||
|
|
|
|||
|
|
@ -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