From 8f1664afc6d1f13a2956dc14f153cd8572843d17 Mon Sep 17 00:00:00 2001 From: Shim Won Date: Sat, 7 Mar 2015 13:29:38 +0900 Subject: [PATCH] Update Translation to b95ad29 --- docs/08-working-with-the-browser.ko-KR.md | 10 +++++----- docs/08.1-more-about-refs.ko-KR.md | 6 +++--- docs/10.4-test-utils.ko-KR.md | 2 +- docs/ref-01-top-level-api.ko-KR.md | 7 +++++++ docs/ref-02-component-api.ko-KR.md | 4 ++++ docs/ref-03-component-specs.ko-KR.md | 12 ++---------- docs/tutorial.ko-KR.md | 22 ++++++++++++---------- 7 files changed, 34 insertions(+), 29 deletions(-) diff --git a/docs/08-working-with-the-browser.ko-KR.md b/docs/08-working-with-the-browser.ko-KR.md index 5069586e..5bb96ded 100644 --- a/docs/08-working-with-the-browser.ko-KR.md +++ b/docs/08-working-with-the-browser.ko-KR.md @@ -18,13 +18,13 @@ React는 DOM을 직접 다루지 않기 때문에 굉장히 빠릅니다. React 더 효율적이고 쉬우므로 대개의 경우 React의 "가짜 브라우저"를 이용해 작업을 하게 될 것입니다. 하지만 간혹 jQuery 플러그인 같은 서드파티 라이브러리를 다루다 보면 기저(underlying)의 API에 접근할 필요가 있을지도 모릅니다. React는 기저의 DOM API를 직접 다루는 회피방법을 제공합니다. -## Refs와 getDOMNode() +## Refs와 findDOMNode() -브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. 모든 마운트된 컴포넌트는 `getDOMNode()` 함수를 갖고 있으며, 이를 통해서 참조를 얻을 수 있습니다. +브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. React는 `React.findDOMNode(component)` 함수를 갖고 있으며, 이를 통해서 컴포넌트의 DOM 노드의 참조를 얻을 수 있습니다. > 주의: > -> `getDOMNode()`는 마운트 된 컴포넌트에서만 동작합니다 (DOM에 배치된 컴포넌트를 말합니다). 아직 마운트 되지 않은 컴포넌트에서 이를 호출하려고 하면 (컴포넌트가 아직 생성되기 이전인 `render()` 시점에 `getDOMNode()`를 호출한다든가) 예외가 발생합니다. +> `findDOMNode()`는 마운트 된 컴포넌트에서만 동작합니다 (DOM에 배치된 컴포넌트를 말합니다). 아직 마운트 되지 않은 컴포넌트에서 이를 호출하려고 하면 (컴포넌트가 아직 생성되기 이전인 `render()` 시점에 `findDOMNode()`를 호출한다든가) 예외가 발생합니다. React 컴포넌트에 대한 참조는 현재의 React 컴포넌트를 위해 `this`를, 소유한 컴포넌트의 참조를 얻기 위해 refs를 사용해 얻을 수 있습니다. 다음과 같이 동작합니다: @@ -32,7 +32,7 @@ React 컴포넌트에 대한 참조는 현재의 React 컴포넌트를 위해 `t var MyComponent = React.createClass({ handleClick: function() { // raw DOM API를 사용해 명시적으로 텍스트 인풋을 포커스 합니다. - this.refs.myTextInput.getDOMNode().focus(); + React.findDOMNode(this.refs.myTextInput).focus(); }, render: function() { // ref 어트리뷰트는 컴포넌트가 마운트되면 그에 대한 참조를 this.refs에 추가합니다. @@ -96,7 +96,7 @@ React는 이 프로세스에 훅을 지정할 수 있는 생명주기 메소드 _마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합니다: -* `getDOMNode(): DOMElement`는 렌더링 된 DOM 노드에 대한 참조를 얻기 위해 모든 마운트된 컴포넌트에서 호출할 수 있습니다. +* `findDOMNode(): DOMElement`는 렌더링 된 DOM 노드에 대한 참조를 얻기 위해 모든 마운트된 컴포넌트에서 호출할 수 있습니다. * `forceUpdate()`는 `this.setState`를 사용하지 않고 컴포넌트 state의 더 깊은 측면(deeper aspect)의 변경된 것을 알고 있을 때 모든 마운트된 컴포넌트에서 호출할 수 있습니다. diff --git a/docs/08.1-more-about-refs.ko-KR.md b/docs/08.1-more-about-refs.ko-KR.md index c06cbae0..8ac32839 100644 --- a/docs/08.1-more-about-refs.ko-KR.md +++ b/docs/08.1-more-about-refs.ko-KR.md @@ -84,7 +84,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특 this.refs.myInput ``` - `this.refs.myInput.getDOMNode()`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다. + `React.findDOMNode(this.refs.myInput)`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다. ## 예제 완성하기 @@ -100,7 +100,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특 // input을 비워준다 this.setState({userInput: ''}, function() { // 이 코드는 컴포넌트가 다시 렌더 된 다음 실행됩니다 - this.refs.theInput.getDOMNode().focus(); // 짠! 포커스 됨! + React.findDOMNode(this.refs.theInput).focus(); // 짠! 포커스 됨! }); }, render: function() { @@ -130,7 +130,7 @@ Refs는 반응적인 `props`와 `state` 스트리밍을 통해서는 불편했 ### 이점: - 컴포넌트 클래스에 public 메소드(ex. Typeahead의 reset)를 선언할 수 있으며 refs를 통해 그를 호출할 수 있습니다. (ex. `this.refs.myTypeahead.reset()`) -- DOM을 측정하기 위해서는 거의 항상 `` 같은 "기본" 컴포넌트를 다루고 `this.refs.myInput.getDOMNode()`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다. +- DOM을 측정하기 위해서는 거의 항상 `` 같은 "기본" 컴포넌트를 다루고 `React.findDOMNode(this.refs.myInput)`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다. - Refs는 자동으로 기록을 관리합니다! 자식이 파괴되면, 그의 ref도 마찬가지로 파괴됩니다. 참조를 유지하기 위해 뭔가 미친 짓을 하지 않는 한, 메모리 걱정은 하지 않아도 됩니다. ### 주의: diff --git a/docs/10.4-test-utils.ko-KR.md b/docs/10.4-test-utils.ko-KR.md index 64ab3733..89024334 100644 --- a/docs/10.4-test-utils.ko-KR.md +++ b/docs/10.4-test-utils.ko-KR.md @@ -19,7 +19,7 @@ DOM 노드에 이벤트 디스패치하는 것을 시뮬레이트합니다. 선 사용 예: ```javascript -var node = this.refs.input.getDOMNode(); +var node = React.findDOMNode(this.refs.input); React.addons.TestUtils.Simulate.click(node); React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}}); React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"}); diff --git a/docs/ref-01-top-level-api.ko-KR.md b/docs/ref-01-top-level-api.ko-KR.md index 8791897a..693e9f96 100644 --- a/docs/ref-01-top-level-api.ko-KR.md +++ b/docs/ref-01-top-level-api.ko-KR.md @@ -105,6 +105,13 @@ boolean isValidElement(* object) 주어진 객체가 ReactElement인지 확인합니다. +### React.findDOMNode + +```javascript +DOMElement findDOMNode(ReactComponent component) +``` +이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. `render`가 `null`이나 `false`를 리턴할 때 `React.findDOMNode()`는 `null`을 리턴합니다. + ### React.DOM diff --git a/docs/ref-02-component-api.ko-KR.md b/docs/ref-02-component-api.ko-KR.md index e6e4b59a..231c0cb8 100644 --- a/docs/ref-02-component-api.ko-KR.md +++ b/docs/ref-02-component-api.ko-KR.md @@ -60,6 +60,10 @@ DOMElement getDOMNode() 이 컴포넌트가 DOM에 마운트된 경우 해당하는 네이티브 브라우저 DOM 엘리먼트를 리턴합니다. 이 메소드는 폼 필드의 값이나 DOM의 크기/위치 등 DOM에서 정보를 읽을 때 유용합니다. `render`가 `null`이나 `false`를 리턴하였다면 `this.getDOMNode()`는 `null`을 리턴합니다. +> 주의: +> +> getDOMNode는 비 추천 상태가 되었고 [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode)로 교체되었습니다. + ### isMounted diff --git a/docs/ref-03-component-specs.ko-KR.md b/docs/ref-03-component-specs.ko-KR.md index 364a734f..3156aa1d 100644 --- a/docs/ref-03-component-specs.ko-KR.md +++ b/docs/ref-03-component-specs.ko-KR.md @@ -21,7 +21,7 @@ ReactComponent render() 호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 컴포넌트를 리턴합니다. 이 자식 컴포넌트는 네이티브 DOM 컴포넌트의 가상 표현 (`
`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다. -아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `