From 6c258bd27193a68bce11f1374689f822877ec17e Mon Sep 17 00:00:00 2001 From: Shim Won Date: Sat, 14 Mar 2015 10:03:30 +0900 Subject: [PATCH 1/9] Update to ed257cb --- docs/ref-01-top-level-api.ko-KR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ref-01-top-level-api.ko-KR.md b/docs/ref-01-top-level-api.ko-KR.md index 9205b245..201b8592 100644 --- a/docs/ref-01-top-level-api.ko-KR.md +++ b/docs/ref-01-top-level-api.ko-KR.md @@ -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 From 394770a9ef7d7b4e6fddebe368694cc31d4d7fe9 Mon Sep 17 00:00:00 2001 From: Ted Kim Date: Sat, 14 Mar 2015 17:25:27 +0900 Subject: [PATCH 2/9] Translate tips 01..04 (based on 157d7770c99be26a9e0557d00978f15f6d9db794) --- tips/01-introduction.ko-KR.md | 13 ++++++++ tips/02-inline-styles.ko-KR.md | 23 +++++++++++++ tips/03-if-else-in-JSX.ko-KR.md | 54 +++++++++++++++++++++++++++++++ tips/04-self-closing-tag.ko-KR.md | 14 ++++++++ 4 files changed, 104 insertions(+) create mode 100644 tips/01-introduction.ko-KR.md create mode 100644 tips/02-inline-styles.ko-KR.md create mode 100644 tips/03-if-else-in-JSX.ko-KR.md create mode 100644 tips/04-self-closing-tag.ko-KR.md diff --git a/tips/01-introduction.ko-KR.md b/tips/01-introduction.ko-KR.md new file mode 100644 index 00000000..e5adf24a --- /dev/null +++ b/tips/01-introduction.ko-KR.md @@ -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)에서 도움을 요청하실 수 있습니다. diff --git a/tips/02-inline-styles.ko-KR.md b/tips/02-inline-styles.ko-KR.md new file mode 100644 index 00000000..f0d42174 --- /dev/null +++ b/tips/02-inline-styles.ko-KR.md @@ -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(
Hello World!
, mountNode); +``` + +스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관성있도록 camelCased 형식입니다. (예를 들어 `node.style.backgroundImage`) [`ms`를 제외한](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) 벤더 프리픽스는 대문자로 시작해야 합니다. 따라서 `WebkitTransition`은 대문자 "W"를 사용합니다. diff --git a/tips/03-if-else-in-JSX.ko-KR.md b/tips/03-if-else-in-JSX.ko-KR.md new file mode 100644 index 00000000..1d1bd98b --- /dev/null +++ b/tips/03-if-else-in-JSX.ko-KR.md @@ -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(
Hello World!
, mountNode); + +// 다음의 JS 코드로 변환됩니다. +React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode); +``` + +그렇기 때문에 `if` 구문을 넣을 수 없습니다. 다음 예제를 봅시다. + +```js +// 이 JSX 코드는 +
Hello World!
+ +// 다음의 JS 코드로 변환됩니다. +React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!"); +``` + +이는 올바른 JS가 아닙니다. 대신 삼항 연산자를 사용할 수 있습니다. + +```js +React.render(
Hello World!
, mountNode); +``` + +삼항 연산자가 충분하지 않다면 `if` 문을 사용해 어떤 컴포넌트가 사용될 지 결정할 수 있습니다. + +```js +var loginButton; +if (loggedIn) { + loginButton = ; +} else { + loginButton = ; +} + +return ( + +) +``` + +[JSX 컴파일러](/react/jsx-compiler.html)로 지금 바로 사용해보세요. diff --git a/tips/04-self-closing-tag.ko-KR.md b/tips/04-self-closing-tag.ko-KR.md new file mode 100644 index 00000000..a4529592 --- /dev/null +++ b/tips/04-self-closing-tag.ko-KR.md @@ -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에서 ``는 유효하지 않고 ``만 유효합니다. 모든 태그는 닫혀야 합니다. 자기 자신을 닫는 형식을 사용하거나 대응되는 닫는 태그(``)가 필요합니다. + +> 주의: +> +> 모든 React 컴포넌트는 자기 자신을 닫을 수 있습니다: `
`. `
`와 동일합니다. From 80f7bf243950097b821e69b1944797f5d7adc80e Mon Sep 17 00:00:00 2001 From: Jinwoo Oh Date: Sun, 15 Mar 2015 02:09:50 +0900 Subject: [PATCH 3/9] Translate tip-14 to Korean - Up to 92c37ff --- ...14-communicate-between-components.ko-KR.md | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 tips/14-communicate-between-components.ko-KR.md diff --git a/tips/14-communicate-between-components.ko-KR.md b/tips/14-communicate-between-components.ko-KR.md new file mode 100644 index 00000000..f0c63f03 --- /dev/null +++ b/tips/14-communicate-between-components.ko-KR.md @@ -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 ( +
+ {this.props.items.map(function(item, i) { + return ( +
{item}
+ ); + }, this)} +
+ ); + } +}); + +React.render( + , mountNode ); +``` + +`bind(this, arg1, arg2, ...)`의 사용을 확인하세요: 간단히 `handleClick`에 인자를 더 넘겼습니다. 이는 React의 새로운 컨셉이 아닙니다; 그냥 JavaScript죠. + +부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다. +`componentDidMount()`에서 이벤트를 구독하고, `componentWillUnmount()`에서 해제합니다. 이벤트를 받으면 `setState()`를 호출합니다. From 5b2f1918798d5e517efc02d5f07030cb34b14c94 Mon Sep 17 00:00:00 2001 From: Jinwoo Oh Date: Sun, 15 Mar 2015 02:12:35 +0900 Subject: [PATCH 4/9] Translate tip-15 to Korean - Up to 52494f9 --- tips/15-expose-component-functions.ko-KR.md | 59 +++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 tips/15-expose-component-functions.ko-KR.md diff --git a/tips/15-expose-component-functions.ko-KR.md b/tips/15-expose-component-functions.ko-KR.md new file mode 100644 index 00000000..17879614 --- /dev/null +++ b/tips/15-expose-component-functions.ko-KR.md @@ -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
{this.props.title}
; + }, + + //이 컴포넌트는 `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 ( +
+ {this.state.items.map(function(item, i) { + var boundClick = this.handleClick.bind(this, i); + return ( + + ); + }, this)} +
+ ); + } +}); + +React.render(, mountNode); +``` + +다른 방법으로는, `isLastUnfinishedItem` prop을 `todo`에 넘기는 방식으로 원하는 바를 이룰수도 있습니다. `componentDidUpdate`에서 prop을 확인하고 스스로 애니메이션 효과를 주는겁니다; 하지만 애니메이션 제어를 위해 다른 prop들을 넘기게 되면 이는 금새 난잡해질 수 있습니다. From 40ae76692c2e591688a451140cce546f7299277d Mon Sep 17 00:00:00 2001 From: Jinwoo Oh Date: Sun, 15 Mar 2015 02:13:39 +0900 Subject: [PATCH 5/9] Translate tip-16 to Korean - Up to 1cb3f25 --- tips/16-references-to-components.ko-KR.md | 28 +++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 tips/16-references-to-components.ko-KR.md diff --git a/tips/16-references-to-components.ko-KR.md b/tips/16-references-to-components.ko-KR.md new file mode 100644 index 00000000..f26b3c98 --- /dev/null +++ b/tips/16-references-to-components.ko-KR.md @@ -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(, myContainer); +``` + +명심하세요, JSX는 컴포넌트 인스턴스를 반환하지 않습니다! 단지 마운트된 컴포넌트가 어떻게 보일지 알려주는 간단한 서술인 **ReactElement**일 뿐입니다. + +```js +var myComponentElement = ; // ReactElement일 뿐입니다. + +// 코드들이 여기 위치하게 됩니다... + +var myComponentInstance = React.render(myComponentElement, myContainer); +``` + +> 주의: +> +> 이는 최상위 레벨에서만 사용되어야 합니다. 컴포넌트의 내부에서는 `prop`과 `state`가 자식컴포넌트와의 통신을 제어하며, [refs](http://facebook.github.io/react/docs/more-about-refs-ko-KR.html)를 통해서만 컴포넌트를 참조할 수 있습니다. From 51b8bdf8f8004c1c0b11e46b287fac99dc520b0f Mon Sep 17 00:00:00 2001 From: Jinwoo Oh Date: Sun, 15 Mar 2015 02:14:20 +0900 Subject: [PATCH 6/9] Translate tip-17 to Korean - Up to 6f44f60 --- tips/17-children-undefined-ko-KR.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 tips/17-children-undefined-ko-KR.md diff --git a/tips/17-children-undefined-ko-KR.md b/tips/17-children-undefined-ko-KR.md new file mode 100644 index 00000000..21552e9b --- /dev/null +++ b/tips/17-children-undefined-ko-KR.md @@ -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`을 참조하지 않습니다! + // 마지막 줄의 `` 사이의 정의되지 않은 자식을 참조합니다. + console.log(this.props.children); + }, + + render: function() { + return
; + } +}); + +React.render(, mountNode); +``` + +괜찮은 예제들을 더 알아보려면, [프론트 페이지](/)의 마지막 예제를 참고하세요. From d563124cc154a91f50157bf63ba10cedc7c69da5 Mon Sep 17 00:00:00 2001 From: Jinwoo Oh Date: Sun, 15 Mar 2015 02:15:04 +0900 Subject: [PATCH 7/9] Translate tip-18 to Korean - Up to 6f44f60 --- docs/ref-03-component-specs.ko-KR.md | 1 + ...18-use-react-with-other-libraries.ko-KR.md | 39 +++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 tips/18-use-react-with-other-libraries.ko-KR.md diff --git a/docs/ref-03-component-specs.ko-KR.md b/docs/ref-03-component-specs.ko-KR.md index 7dcdb380..ce6d1950 100644 --- a/docs/ref-03-component-specs.ko-KR.md +++ b/docs/ref-03-component-specs.ko-KR.md @@ -98,6 +98,7 @@ string displayName `displayName` 문자열은 디버그 메시지에 사용됩니다. JSX는 이 값을 자동으로 설정합니다. [JSX 깊이 알기](/react/docs/jsx-in-depth-ko-KR.html#the-transform)를 참고하세요. + ## 생명주기 메소드 컴포넌트의 생명주기에서 특정 시점마다 실행되는 메소드들입니다. diff --git a/tips/18-use-react-with-other-libraries.ko-KR.md b/tips/18-use-react-with-other-libraries.ko-KR.md new file mode 100644 index 00000000..c4aeab42 --- /dev/null +++ b/tips/18-use-react-with-other-libraries.ko-KR.md @@ -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($('')); + }, + + componentWillUnmount: function() { + // 정리는 여기서 합니다 + }, + + shouldComponentUpdate: function() { + // 이 컴포넌트를 다시는 업데이트하지 않도록 하죠. + return false; + }, + + render: function() { + return
; + } +}); + +React.render(, mountNode); +``` + +이 방식으로 별도의 [이벤트 리스너](/react/tips/dom-event-listeners-ko-KR.html)나 [이벤트 스트림](https://baconjs.github.io) 같은 것들을 더할 수 있습니다. From 02c1a4c2acbbe6c6dbe8563e984c4aa214a7173a Mon Sep 17 00:00:00 2001 From: jiyeonseo Date: Mon, 16 Mar 2015 18:28:49 +0900 Subject: [PATCH 8/9] Translate tips 05..10 - Up to 3fd6ac5 --- ...-maximum-number-of-jsx-root-nodes.ko-KR.md | 12 ++++ tips/06-style-props-value-px.ko-KR.md | 35 ++++++++++ tips/07-children-props-type.ko-KR.md | 49 ++++++++++++++ tips/08-controlled-input-null-value.ko-KR.md | 22 ++++++ ...rops-not-triggered-after-mounting.ko-KR.md | 13 ++++ ...n-getInitialState-as-anti-pattern.ko-KR.md | 67 +++++++++++++++++++ 6 files changed, 198 insertions(+) create mode 100644 tips/05-maximum-number-of-jsx-root-nodes.ko-KR.md create mode 100644 tips/06-style-props-value-px.ko-KR.md create mode 100644 tips/07-children-props-type.ko-KR.md create mode 100644 tips/08-controlled-input-null-value.ko-KR.md create mode 100644 tips/09-componentWillReceiveProps-not-triggered-after-mounting.ko-KR.md create mode 100644 tips/10-props-in-getInitialState-as-anti-pattern.ko-KR.md diff --git a/tips/05-maximum-number-of-jsx-root-nodes.ko-KR.md b/tips/05-maximum-number-of-jsx-root-nodes.ko-KR.md new file mode 100644 index 00000000..b49c4a16 --- /dev/null +++ b/tips/05-maximum-number-of-jsx-root-nodes.ko-KR.md @@ -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로 컴파일 함을 잊지말아야 합니다. 두개의 함수를 리턴하는 것은 문법적으로 맞지 않습니다. 이와 마찬가지로, 한 삼항 연산자 안에 한개 이상의 자식 컴포넌트를 넣으면 안됩니다. \ No newline at end of file diff --git a/tips/06-style-props-value-px.ko-KR.md b/tips/06-style-props-value-px.ko-KR.md new file mode 100644 index 00000000..0946bae2 --- /dev/null +++ b/tips/06-style-props-value-px.ko-KR.md @@ -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(
Hello World!
, 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` diff --git a/tips/07-children-props-type.ko-KR.md b/tips/07-children-props-type.ko-KR.md new file mode 100644 index 00000000..2994f778 --- /dev/null +++ b/tips/07-children-props-type.ko-KR.md @@ -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
; + } +}); + +React.render( + , + 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
; + } +}); + +React.render(hello, mountNode); +``` + +`this.props.children`을 쉽게 다룰 수 있도록 [React.Children utilities](/react/docs/top-level-api-ko-KR.html#react.children)를 제공하고 있습니다. diff --git a/tips/08-controlled-input-null-value.ko-KR.md b/tips/08-controlled-input-null-value.ko-KR.md new file mode 100644 index 00000000..c045d3d0 --- /dev/null +++ b/tips/08-controlled-input-null-value.ko-KR.md @@ -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(, mountNode); + +setTimeout(function() { + React.render(, mountNode); +}, 1000); +``` diff --git a/tips/09-componentWillReceiveProps-not-triggered-after-mounting.ko-KR.md b/tips/09-componentWillReceiveProps-not-triggered-after-mounting.ko-KR.md new file mode 100644 index 00000000..bbee76b3 --- /dev/null +++ b/tips/09-componentWillReceiveProps-not-triggered-after-mounting.ko-KR.md @@ -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가 없다고 해도) 메소드의 형태를 구별하는 데 도움이 됩니다. + diff --git a/tips/10-props-in-getInitialState-as-anti-pattern.ko-KR.md b/tips/10-props-in-getInitialState-as-anti-pattern.ko-KR.md new file mode 100644 index 00000000..ee1a6ab7 --- /dev/null +++ b/tips/10-props-in-getInitialState-as-anti-pattern.ko-KR.md @@ -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
{this.state.nameWithQualifier}
; + } +}); + +React.render(, mountNode); +``` + +더 나은 코드: + +```js +var MessageBox = React.createClass({ + render: function() { + return
{'Mr. ' + this.props.name}
; + } +}); + +React.render(, 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
{this.state.count}
; + } +}); + +React.render(, mountNode); +``` From 621cea1f3aead73a65dfc3e17c5dd0b08d0f588d Mon Sep 17 00:00:00 2001 From: Shim Won Date: Sat, 21 Mar 2015 08:27:56 +0900 Subject: [PATCH 9/9] Update Korean translation to b3c75d8 --- docs/02-displaying-data.ko-KR.md | 4 +- docs/02.1-jsx-in-depth.ko-KR.md | 4 +- docs/02.3-jsx-gotchas.ko-KR.md | 2 +- .../03-interactivity-and-dynamic-uis.ko-KR.md | 2 - docs/04-multiple-components.ko-KR.md | 4 +- docs/05-reusable-components.ko-KR.md | 2 +- docs/06-transferring-props.ko-KR.md | 4 +- docs/07-forms.ko-KR.md | 2 +- docs/10-addons.ko-KR.md | 1 - docs/10.1-animation.ko-KR.md | 10 +++- docs/10.2-form-input-binding-sugar.ko-KR.md | 2 +- docs/10.4-test-utils.ko-KR.md | 2 +- docs/ref-01-top-level-api.ko-KR.md | 9 ---- docs/ref-04-tags-and-attributes.ko-KR.md | 2 +- docs/ref-05-events.ko-KR.md | 3 -- docs/ref-09-glossary.ko-KR.md | 16 +++--- docs/tutorial.ko-KR.md | 2 +- docs/videos.ko-KR.md | 51 ++++++++++++++----- 18 files changed, 71 insertions(+), 51 deletions(-) diff --git a/docs/02-displaying-data.ko-KR.md b/docs/02-displaying-data.ko-KR.md index 0c02ccbc..23492661 100644 --- a/docs/02-displaying-data.ko-KR.md +++ b/docs/02-displaying-data.ko-KR.md @@ -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 태그에 대한 빌트인 팩토리를 가지고 있습니다. diff --git a/docs/02.1-jsx-in-depth.ko-KR.md b/docs/02.1-jsx-in-depth.ko-KR.md index cbd982a8..871e2b9c 100644 --- a/docs/02.1-jsx-in-depth.ko-KR.md +++ b/docs/02.1-jsx-in-depth.ko-KR.md @@ -26,7 +26,7 @@ HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세 ```javascript var myDivElement =
; -React.render(myDivElement, document.body); +React.render(myDivElement, document.getElementById('example')); ``` React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요. @@ -34,7 +34,7 @@ React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수 ```javascript var MyComponent = React.createClass({/*...*/}); var myElement = ; -React.render(myElement, document.body); +React.render(myElement, document.getElementById('example')); ``` React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다. diff --git a/docs/02.3-jsx-gotchas.ko-KR.md b/docs/02.3-jsx-gotchas.ko-KR.md index 30436103..3dd72770 100644 --- a/docs/02.3-jsx-gotchas.ko-KR.md +++ b/docs/02.3-jsx-gotchas.ko-KR.md @@ -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 엔티티 diff --git a/docs/03-interactivity-and-dynamic-uis.ko-KR.md b/docs/03-interactivity-and-dynamic-uis.ko-KR.md index 2abf5d85..8154084a 100644 --- a/docs/03-interactivity-and-dynamic-uis.ko-KR.md +++ b/docs/03-interactivity-and-dynamic-uis.ko-KR.md @@ -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);`로 터치 이벤트 핸들링을 켜면 됩니다. - ## 기본 구현: 오토바인딩과 이벤트 델리게이션 diff --git a/docs/04-multiple-components.ko-KR.md b/docs/04-multiple-components.ko-KR.md index 8e48777a..f78bff48 100644 --- a/docs/04-multiple-components.ko-KR.md +++ b/docs/04-multiple-components.ko-KR.md @@ -75,7 +75,7 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트 ### 자식 Reconciliation (비교조정) -**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 랜더 패스가 있다고 해봅시다. +**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 렌더 패스가 있다고 해봅시다. ```html // Render Pass 1 @@ -115,7 +115,7 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트 ### 동적 자식 -자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 랜더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다. +자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 렌더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다. ```javascript render: function() { diff --git a/docs/05-reusable-components.ko-KR.md b/docs/05-reusable-components.ko-KR.md index 41980a58..6682be7a 100644 --- a/docs/05-reusable-components.ko-KR.md +++ b/docs/05-reusable-components.ko-KR.md @@ -26,7 +26,7 @@ React.createClass({ optionalString: React.PropTypes.string, // 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소 - // 이것들을 포함하는 배열이나 엘리먼트 + // 이것들을 포함하는 배열(이나 프래그먼트) optionalNode: React.PropTypes.node, // React 엘리먼트 diff --git a/docs/06-transferring-props.ko-KR.md b/docs/06-transferring-props.ko-KR.md index 296d8c4f..0daa5b0f 100644 --- a/docs/06-transferring-props.ko-KR.md +++ b/docs/06-transferring-props.ko-KR.md @@ -41,7 +41,7 @@ React.render( 세상아 안녕! , - document.body + document.getElementById('example') ); ``` @@ -78,7 +78,7 @@ React.render( 세상아 안녕! , - document.body + document.getElementById('example') ); ``` diff --git a/docs/07-forms.ko-KR.md b/docs/07-forms.ko-KR.md index 397d04b7..dfcb099d 100644 --- a/docs/07-forms.ko-KR.md +++ b/docs/07-forms.ko-KR.md @@ -75,7 +75,7 @@ HTML에서는 `