Update Translation to b95ad29
Shim Won committed
Mar 7, 2015 at 13:29 UTC
87fb9caca7d223d1c4ef588f23622189052056b4
7 files changed
+34
-29
docs/docs/08-working-with-the-browser.ko-KR.md
+5
-5
@@ -18,13 +18,13 @@ React는 DOM을 직접 다루지 않기 때문에 굉장히 빠릅니다. React
18
더 효율적이고 쉬우므로 대개의 경우 React의 "가짜 브라우저"를 이용해 작업을 하게 될 것입니다. 하지만 간혹 jQuery 플러그인 같은 서드파티 라이브러리를 다루다 보면 기저(underlying)의 API에 접근할 필요가 있을지도 모릅니다. React는 기저의 DOM API를 직접 다루는 회피방법을 제공합니다.
19
20
21
-## Refs와 getDOMNode()
21
+## Refs와 findDOMNode()
22
23
-브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. 모든 마운트된 컴포넌트는 `getDOMNode()` 함수를 갖고 있으며, 이를 통해서 참조를 얻을 수 있습니다.
23
+브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. React는 `React.findDOMNode(component)` 함수를 갖고 있으며, 이를 통해서 컴포넌트의 DOM 노드의 참조를 얻을 수 있습니다.
24
25
> 주의:
26
>
27
-> `getDOMNode()`는 마운트 된 컴포넌트에서만 동작합니다 (DOM에 배치된 컴포넌트를 말합니다). 아직 마운트 되지 않은 컴포넌트에서 이를 호출하려고 하면 (컴포넌트가 아직 생성되기 이전인 `render()` 시점에 `getDOMNode()`를 호출한다든가) 예외가 발생합니다.
27
+> `findDOMNode()`는 마운트 된 컴포넌트에서만 동작합니다 (DOM에 배치된 컴포넌트를 말합니다). 아직 마운트 되지 않은 컴포넌트에서 이를 호출하려고 하면 (컴포넌트가 아직 생성되기 이전인 `render()` 시점에 `findDOMNode()`를 호출한다든가) 예외가 발생합니다.
28
29
React 컴포넌트에 대한 참조는 현재의 React 컴포넌트를 위해 `this`를, 소유한 컴포넌트의 참조를 얻기 위해 refs를 사용해 얻을 수 있습니다. 다음과 같이 동작합니다:
30
@@ -32,7 +32,7 @@ React 컴포넌트에 대한 참조는 현재의 React 컴포넌트를 위해 `t
32
var MyComponent = React.createClass({
33
handleClick: function() {
34
// raw DOM API를 사용해 명시적으로 텍스트 인풋을 포커스 합니다.
35
- this.refs.myTextInput.getDOMNode().focus();
35
+ React.findDOMNode(this.refs.myTextInput).focus();
36
},
37
render: function() {
38
// ref 어트리뷰트는 컴포넌트가 마운트되면 그에 대한 참조를 this.refs에 추가합니다.
@@ -96,7 +96,7 @@ React는 이 프로세스에 훅을 지정할 수 있는 생명주기 메소드
96
97
_마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합니다:
98
99
-* `getDOMNode(): DOMElement`는 렌더링 된 DOM 노드에 대한 참조를 얻기 위해 모든 마운트된 컴포넌트에서 호출할 수 있습니다.
99
+* `findDOMNode(): DOMElement`는 렌더링 된 DOM 노드에 대한 참조를 얻기 위해 모든 마운트된 컴포넌트에서 호출할 수 있습니다.
100
* `forceUpdate()`는 `this.setState`를 사용하지 않고 컴포넌트 state의 더 깊은 측면(deeper aspect)의 변경된 것을 알고 있을 때 모든 마운트된 컴포넌트에서 호출할 수 있습니다.
101
102
docs/docs/08.1-more-about-refs.ko-KR.md
+3
-3
@@ -84,7 +84,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특
84
this.refs.myInput
85
```
86
87
- `this.refs.myInput.getDOMNode()`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다.
87
+ `React.findDOMNode(this.refs.myInput)`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다.
88
89
## 예제 완성하기
90
@@ -100,7 +100,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특
100
// input을 비워준다
101
this.setState({userInput: ''}, function() {
102
// 이 코드는 컴포넌트가 다시 렌더 된 다음 실행됩니다
103
- this.refs.theInput.getDOMNode().focus(); // 짠! 포커스 됨!
103
+ React.findDOMNode(this.refs.theInput).focus(); // 짠! 포커스 됨!
104
});
105
},
106
render: function() {
@@ -130,7 +130,7 @@ Refs는 반응적인 `props`와 `state` 스트리밍을 통해서는 불편했
130
### 이점:
131
132
- 컴포넌트 클래스에 public 메소드(ex. Typeahead의 reset)를 선언할 수 있으며 refs를 통해 그를 호출할 수 있습니다. (ex. `this.refs.myTypeahead.reset()`)
133
-- DOM을 측정하기 위해서는 거의 항상 `<input />` 같은 "기본" 컴포넌트를 다루고 `this.refs.myInput.getDOMNode()`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다.
133
+- DOM을 측정하기 위해서는 거의 항상 `<input />` 같은 "기본" 컴포넌트를 다루고 `React.findDOMNode(this.refs.myInput)`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다.
134
- Refs는 자동으로 기록을 관리합니다! 자식이 파괴되면, 그의 ref도 마찬가지로 파괴됩니다. 참조를 유지하기 위해 뭔가 미친 짓을 하지 않는 한, 메모리 걱정은 하지 않아도 됩니다.
135
136
### 주의:
docs/docs/10.4-test-utils.ko-KR.md
+1
-1
@@ -19,7 +19,7 @@ DOM 노드에 이벤트 디스패치하는 것을 시뮬레이트합니다. 선
19
사용 예:
20
21
```javascript
22
-var node = this.refs.input.getDOMNode();
22
+var node = React.findDOMNode(this.refs.input);
23
React.addons.TestUtils.Simulate.click(node);
24
React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});
25
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
docs/docs/ref-01-top-level-api.ko-KR.md
+7
@@ -105,6 +105,13 @@ boolean isValidElement(* object)
105
106
주어진 객체가 ReactElement인지 확인합니다.
107
108
+### React.findDOMNode
109
+
110
+```javascript
111
+DOMElement findDOMNode(ReactComponent component)
112
+```
113
+이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. `render`가 `null`이나 `false`를 리턴할 때 `React.findDOMNode()`는 `null`을 리턴합니다.
114
+
115
116
### React.DOM
117
docs/docs/ref-02-component-api.ko-KR.md
+4
@@ -60,6 +60,10 @@ DOMElement getDOMNode()
60
61
이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. `render`가 `null`이나 `false`를 리턴하였다면 `this.getDOMNode()`는 `null`을 리턴합니다.
62
63
+> 주의:
64
+>
65
+> getDOMNode는 비 추천 상태가 되었고 [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode)로 교체되었습니다.
66
+
67
68
### isMounted
69
docs/docs/ref-03-component-specs.ko-KR.md
+2
-10
@@ -21,7 +21,7 @@ ReactComponent render()
21
22
호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 컴포넌트를 리턴합니다. 이 자식 컴포넌트는 네이티브 DOM 컴포넌트의 가상 표현 (`<div />`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.
23
24
-아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `<noscript>` 태그를 렌더링합니다. `null`이나 `false`를 리턴한 경우, `this.getDOMNode()`는 `null`을 리턴합니다.
24
+아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `<noscript>` 태그를 렌더링합니다. `null`이나 `false`를 리턴한 경우, `React.findDOMNode(this)`는 `null`을 리턴합니다.
25
26
`render()` 함수는 순수 함수여야 합니다. 즉, 컴포넌트의 상태를 변경하지 않고, 여러번 호출해도 같은 결과를 리턴하며, DOM을 읽고 쓰거나 브라우저와 상호작용(예를 들어 `setTimeout`를 사용)하지 않아야 합니다. 브라우저와 상호작용해야 한다면 `componentDidMount()`나 다른 생명주기 메소드에서 수행해야 합니다. `render()` 함수를 순수 함수로 유지하면 서버 렌더링이 훨씬 쓸만해지고 컴포넌트에 대해 생각하기 쉬워집니다.
27
@@ -118,14 +118,10 @@ componentWillMount()
118
componentDidMount()
119
```
120
121
-최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출됩니다. (서버에서는 호출되지 않습니다.) 이 시점에 컴포넌트는 `this.getDOMNode()`로 접근 가능한 DOM 표현을 가집니다.
121
+최초 렌더링이 일어난 다음 클라이언트에서만 한번 호출됩니다. (서버에서는 호출되지 않습니다.) 이 시점에 컴포넌트는 `React.findDOMNode(this)`로 접근 가능한 DOM 표현을 가집니다.
122
123
다른 JavaScript 프레임워크를 연동하거나, `setTimeout`/`setInterval`로 타이머를 설정하고 AJAX 요청을 보내는 등의 작업을 이 메소드에서 합니다.
124
125
-> 주의:
126
->
127
-> v0.9 이전까지 DOM 노드가 마지막 인자로 넘어왔습니다. 이것을 사용하고 있었다면 이제는 `this.getDOMNode()`로 DOM 노드에 접근할 수 있습니다.
128
-
125
126
### 업데이트 시: componentWillReceiveProps
127
@@ -199,10 +195,6 @@ componentDidUpdate(object prevProps, object prevState)
195
196
컴포넌트가 업데이트된 뒤 DOM을 조작해야 하는 경우 사용할 수 있습니다.
197
202
-> 주의:
203
->
204
-> v0.9 이전까지 DOM 노드가 마지막 인자로 넘어왔습니다. 이것을 사용하고 있었다면 이제는 `this.getDOMNode()`로 DOM 노드에 접근할 수 있습니다.
205
-
198
199
### 마운트 해제 시: componentWillUnmount
200
docs/docs/tutorial.ko-KR.md
+12
-10
@@ -28,7 +28,7 @@ next: thinking-in-react-ko-KR.html
28
29
이 튜토리얼을 시작할 때 필요한 건 아니지만, 나중에 실행 중인 서버에 `POST` 요청을 하는 기능을 추가하게 될 것입니다. 서버를 구성하는 것이 익숙하다면, 본인이 편한 방식대로 서버를 구성해 주세요. 서버사이드에 대한 고민없이 React의 학습 그 자체에 집중하고 싶은 분들을 위해서, 몇 가지 언어로 간단한 서버코드를 작성해 놓았습니다 - JavaScript (Node.js), Python, Ruby, Go, PHP 버전이 있고, GitHub에서 찾아보실 수 있습니다. [소스를 확인](https://github.com/reactjs/react-tutorial/)하거나 [zip 파일을 다운로드](https://github.com/reactjs/react-tutorial/archive/master.zip)하고 시작하세요.
30
31
-튜토리얼을 다운로드 받아 시작한다면, `public/index.html`을 열고 바로 시작하세요.
31
+튜토리얼을 시작하려면, `public/index.html`을 열고 바로 시작하세요.
32
33
### 시작하기
34
@@ -490,14 +490,15 @@ var CommentForm = React.createClass({
490
var CommentForm = React.createClass({
491
handleSubmit: function(e) {
492
e.preventDefault();
493
- var author = this.refs.author.getDOMNode().value.trim();
494
- var text = this.refs.text.getDOMNode().value.trim();
493
+ var author = React.findDOMNode(this.refs.author).value.trim();
494
+ var text = React.findDOMNode(this.refs.text).value.trim();
495
if (!text || !author) {
496
return;
497
}
498
// TODO: 서버에 요청을 전송합니다
499
- this.refs.author.getDOMNode().value = '';
500
- this.refs.text.getDOMNode().value = '';
499
+ React.findDOMNode(this.refs.author).value = '';
500
+ React.findDOMNode(this.refs.text).value = '';
501
+ return;
502
},
503
render: function() {
504
return (
@@ -519,7 +520,7 @@ React는 카멜케이스 네이밍 컨벤션으로 컴포넌트에 이벤트 핸
520
521
##### Refs
522
522
-우리는 자식 컴포넌트의 이름을 지정하기 위해 `ref` 어트리뷰트를, 컴포넌트를 참조하기 위해 `this.refs`를 사용합니다. 고유한(native) 브라우저 DOM 엘리먼트를 얻기 위해 `getDOMNode()`를 호출할 수 있습니다.
523
+우리는 자식 컴포넌트의 이름을 지정하기 위해 `ref` 어트리뷰트를, 컴포넌트를 참조하기 위해 `this.refs`를 사용합니다. 고유한(native) 브라우저 DOM 엘리먼트를 얻기 위해 `React.findDOMNode(component)`를 호출할 수 있습니다.
524
525
##### props으로 콜백 처리하기
526
@@ -571,14 +572,15 @@ var CommentBox = React.createClass({
572
var CommentForm = React.createClass({
573
handleSubmit: function(e) {
574
e.preventDefault();
574
- var author = this.refs.author.getDOMNode().value.trim();
575
- var text = this.refs.text.getDOMNode().value.trim();
575
+ var author = React.findDOMNode(this.refs.author).value.trim();
576
+ var text = React.findDOMNode(this.refs.text).value.trim();
577
if (!text || !author) {
578
return;
579
}
580
this.props.onCommentSubmit({author: author, text: text});
580
- this.refs.author.getDOMNode().value = '';
581
- this.refs.text.getDOMNode().value = '';
581
+ React.findDOMNode(this.refs.author).value = '';
582
+ React.findDOMNode(this.refs.text).value = '';
583
+ return;
584
},
585
render: function() {
586
return (