From 16832c701b671d5f2b24a7b3edb920e75c8024d5 Mon Sep 17 00:00:00 2001 From: Leonardo YongUk Kim Date: Thu, 2 Apr 2015 06:25:28 +0900 Subject: [PATCH 1/4] Create 13-false-in-jsx.ko-KR.md Based on 52494f9d723f4b2db12a0bf16a07b243076c15cf --- docs/tips/13-false-in-jsx.ko-KR.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 docs/tips/13-false-in-jsx.ko-KR.md diff --git a/docs/tips/13-false-in-jsx.ko-KR.md b/docs/tips/13-false-in-jsx.ko-KR.md new file mode 100644 index 0000000000..6df0075670 --- /dev/null +++ b/docs/tips/13-false-in-jsx.ko-KR.md @@ -0,0 +1,30 @@ +--- +id: false-in-jsx-ko-KR +title: JSX에서 False +layout: tips +permalink: false-in-jsx-ko-KR.html +prev: initial-ajax-ko-KR.html +next: communicate-between-components-ko-KR.html +--- + +`false` 렌더링이 여러 문맥에서 어떻게 다뤄지는지 봅시다. + +`id="false"`로 렌더링 + +```js +React.render(
, mountNode); +``` + +문자열 `"false"`를 입력값으로 + +```js +React.render(, mountNode); +``` + +자식 없음 + +```js +React.render(
{false}
, mountNode); +``` + +`div` 자식으로 쓰인 문자열 `"false"`를 렌더링하지 않은 것은 더 일반적인 사용 사례를 허용하기 위함입니다. `
{x > 1 && '하나 이상의 아이템을 가졌습니다.'}
` From 792c161cc551f405f802632fddd5dbb63c1d60f8 Mon Sep 17 00:00:00 2001 From: Leonardo YongUk Kim Date: Thu, 2 Apr 2015 06:24:48 +0900 Subject: [PATCH 2/4] Create 12-initial-ajax.ko-KR.md Based on 52494f9d723f4b2db12a0bf16a07b243076c15cf --- docs/tips/12-initial-ajax.ko-KR.md | 51 ++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 docs/tips/12-initial-ajax.ko-KR.md diff --git a/docs/tips/12-initial-ajax.ko-KR.md b/docs/tips/12-initial-ajax.ko-KR.md new file mode 100644 index 0000000000..95903dffbc --- /dev/null +++ b/docs/tips/12-initial-ajax.ko-KR.md @@ -0,0 +1,51 @@ +--- +id: initial-ajax-ko-KR +title: AJAX를 통해 초기 데이터 읽어오기 +layout: tips +permalink: initial-ajax-ko-KR.html +prev: dom-event-listeners-ko-KR.html +next: false-in-jsx-ko-KR.html +--- + +`componentDidMount`에서 데이터를 가져옵니다. 응답이 올 때 데이터가 state에 저장되고 렌더링을 시작하여 UI를 갱신합니다. + +비동기 요청의 응답을 처리하여 state를 변경하기 전에, 컴포넌트가 여전히 마운트되었는지를 확인하기 위해 `this.isMounted()`를 사용합니다. + +이 예제는 희망하는 Github 사용자의 최근 gist를 가져옵니다. + +```js +var UserGist = React.createClass({ + getInitialState: function() { + return { + username: '', + lastGistUrl: '' + }; + }, + + componentDidMount: function() { + $.get(this.props.source, function(result) { + var lastGist = result[0]; + if (this.isMounted()) { + this.setState({ + username: lastGist.owner.login, + lastGistUrl: lastGist.html_url + }); + } + }.bind(this)); + }, + + render: function() { + return ( +
+ {this.state.username}'s last gist is + here. +
+ ); + } +}); + +React.render( + , + mountNode +); +``` From 78f59da8dff0a35808ad5fcaadb63a2b82bebd4c Mon Sep 17 00:00:00 2001 From: Leonardo YongUk Kim Date: Thu, 2 Apr 2015 06:20:26 +0900 Subject: [PATCH 3/4] Translate tips 11 to Korean 1. Create 11-dom-event-listeners.ko-KR.md 2. Update 03-interactivity-and-dynamic-uis.ko-KR.md to add an anchor. Based on 52494f9d723f4b2db12a0bf16a07b243076c15cf --- .../03-interactivity-and-dynamic-uis.ko-KR.md | 1 + docs/tips/11-dom-event-listeners.ko-KR.md | 45 +++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 docs/tips/11-dom-event-listeners.ko-KR.md diff --git a/docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md b/docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md index 8154084ad7..a8c482686f 100644 --- a/docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md +++ b/docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md @@ -42,6 +42,7 @@ React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 ## 기본 구현: 오토바인딩과 이벤트 델리게이션 + 코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다. diff --git a/docs/tips/11-dom-event-listeners.ko-KR.md b/docs/tips/11-dom-event-listeners.ko-KR.md new file mode 100644 index 0000000000..8ecb25f6b5 --- /dev/null +++ b/docs/tips/11-dom-event-listeners.ko-KR.md @@ -0,0 +1,45 @@ +--- +id: dom-event-listeners-ko-KR +title: 컴포넌트에서 DOM 이벤트 리스너 +layout: tips +permalink: dom-event-listeners-ko-KR.html +prev: props-in-getInitialState-as-anti-pattern-ko-KR.html +next: initial-ajax-ko-KR.html +--- + +> 주의: +> +> 이 글은 React에서 제공되지 않은 DOM 이벤트를 어떻게 붙이는지 설명합니다. ([더 자세한 정보는 여기에서 보세요.](/react/docs/events-ko-KR.html)). 이는 jQuery 같은 다른 라이브러리들을 통합할 때 좋습니다. + +윈도우 크기를 조절해봅시다. + +```js +var Box = React.createClass({ + getInitialState: function() { + return {windowWidth: window.innerWidth}; + }, + + handleResize: function(e) { + this.setState({windowWidth: window.innerWidth}); + }, + + componentDidMount: function() { + window.addEventListener('resize', this.handleResize); + }, + + componentWillUnmount: function() { + window.removeEventListener('resize', this.handleResize); + }, + + render: function() { + return
Current window width: {this.state.windowWidth}
; + } +}); + +React.render(, mountNode); +``` + +컴포넌트가 마운트 되고 DOM 표현을 가지게 되면 `componentDidMount`가 호출됩니다. 일반적인 DOM 이벤트를 붙이는 곳으로 여기를 종종 사용합니다. + +이벤트 콜백은 원래 엘리먼트 대신 React 컴포넌트에 바인드하는 걸 주의합시다. React는 [오토바인드](/react/docs/interactivity-and-dynamic-uis-ko-KR.html#under-the-hood-autobinding-and-event-delegation) 과정에서 메서드를 현재 컴포넌트 인스턴스로 바인드합니다. + From 57f14017fb7443b4c02c03a938837fb2634d1c98 Mon Sep 17 00:00:00 2001 From: Shim Won Date: Fri, 10 Apr 2015 06:44:14 +0900 Subject: [PATCH 4/4] Update Korean translation to 0185c68 --- docs/docs/01-why-react.ko-KR.md | 4 ++-- docs/docs/05-reusable-components.ko-KR.md | 2 +- docs/docs/11-advanced-performance.ko-KR.md | 2 +- docs/docs/ref-03-component-specs.ko-KR.md | 4 ++-- docs/tips/05-maximum-number-of-jsx-root-nodes.ko-KR.md | 2 +- docs/tips/14-communicate-between-components.ko-KR.md | 6 +++--- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/docs/01-why-react.ko-KR.md b/docs/docs/01-why-react.ko-KR.md index 40757c6ba8..64ef2bd6b2 100644 --- a/docs/docs/01-why-react.ko-KR.md +++ b/docs/docs/01-why-react.ko-KR.md @@ -9,11 +9,11 @@ React는 페이스북과 인스타그램에서 사용자 인터페이스를 구 우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: **지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.** 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다. -### 단순함 +## 단순함 당신의 애플리케이션이 특정 시점에 어떻게 보여야 할지를 단순히 표현하는 것만으로, 데이터가 변할 때 React는 자동으로 모든 UI 업데이트를 관리해줍니다. -### 선언적 문법 +## 선언적 문법 데이터가 변할 때 React는 "새로 고침" 버튼을 누르듯이 작동하며, 데이터의 바뀐 부분만을 업데이트할 수 있습니다. diff --git a/docs/docs/05-reusable-components.ko-KR.md b/docs/docs/05-reusable-components.ko-KR.md index f721389b8c..7a7ed78296 100644 --- a/docs/docs/05-reusable-components.ko-KR.md +++ b/docs/docs/05-reusable-components.ko-KR.md @@ -98,7 +98,7 @@ var ComponentWithDefaultProps = React.createClass({ ## Prop 전달하기: 단축 -React 컴포넌트의 흔히 그냥 기본 HTML을 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다. +React 컴포넌트의 흔히 그냥 기본 HTML 엘리먼트를 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다. ```javascript var CheckLink = React.createClass({ diff --git a/docs/docs/11-advanced-performance.ko-KR.md b/docs/docs/11-advanced-performance.ko-KR.md index d7d70e16e9..4fba6c299a 100644 --- a/docs/docs/11-advanced-performance.ko-KR.md +++ b/docs/docs/11-advanced-performance.ko-KR.md @@ -11,7 +11,7 @@ React를 도입하려 할 때 많은 사람이 묻는 첫 번째 질문은 React React는 브라우저에서 렌더된 DOM 하위 트리의 서술자 개념인 *가상의 DOM*을 사용합니다. 이 병렬적인 서술체는 React가 DOM 노드를 생성하거나 이미 존재하는 DOM 노드에 접근하는 것(JavaScript 객체를 조작하는 것보다 느리죠)을 피하게 해 줍니다. 컴포넌트의 props나 state가 변경되면 React는 새로운 가상의 DOM을 구성해 이전의 것과 비교해서 실제 DOM 업데이트가 필요한지 결정합니다. 가능한 적게 변화를 적용하기 위해, React는 둘이 다를 경우에만 DOM을 [조정](/react/docs/reconciliation-ko-KR.html)할 것입니다. -이에 더해, React는 컴포넌트 생명주기 함수인 `shouldComponentUpdate`를 제공합니다. 이는 다시 렌더링하는 프로세스가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 `true`를 반환해 React가 업데이트를 수행하도록 합니다. +이에 더해, React는 컴포넌트 생명주기 함수인 `shouldComponentUpdate`를 제공합니다. 이는 다시 렌더링하는 프로세스(가상 DOM 비교와 어쩌면 일어날 DOM 조정)가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 `true`를 반환해 React가 업데이트를 수행하도록 합니다. ```javascript shouldComponentUpdate: function(nextProps, nextState) { diff --git a/docs/docs/ref-03-component-specs.ko-KR.md b/docs/docs/ref-03-component-specs.ko-KR.md index ce6d1950a9..388802485f 100644 --- a/docs/docs/ref-03-component-specs.ko-KR.md +++ b/docs/docs/ref-03-component-specs.ko-KR.md @@ -14,12 +14,12 @@ next: tags-and-attributes-ko-KR.html ### render ```javascript -ReactComponent render() +ReactElement render() ``` `render()` 메소드는 필수 항목입니다. -호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 컴포넌트를 리턴합니다. 이 자식 컴포넌트는 네이티브 DOM 컴포넌트의 가상 표현 (`
`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다. +호출되면 `this.props`와 `this.state`를 토대로 하나의 자식 엘리먼트를 리턴합니다. 이 자식 엘리먼트는 네이티브 DOM 컴포넌트의 가상 표현 (`
`나 `React.DOM.div()` 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다. 아무 것도 렌더링되지 않도록 하려면 `null`이나 `false`를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 `