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); +```