Translate tips 05..10
- Up to 3fd6ac5
jiyeonseo committed
Mar 16, 2015 at 18:28 UTC
0b3fe6f47ec11b2e0e2c9b36b8e30ba55a01fb4e
6 files changed
+198
docs/tips/05-maximum-number-of-jsx-root-nodes.ko-KR.md
new
+12
@@ -0,0 +1,12 @@
1
+---
2
+id: maximum-number-of-jsx-root-nodes-ko-KR
3
+title: JSX 루트 노드의 최대 갯수
4
+layout: tips
5
+permalink: maximum-number-of-jsx-root-nodes-ko-KR.html
6
+prev: self-closing-tag-ko-KR.html
7
+next: style-props-value-px-ko-KR.html
8
+---
9
+
10
+현재 컴포넌트의 `render`는 한 노드만 리턴할 수 있습니다. 만약 `div` 배열을 리턴하려면, `div`, `span`과 같은 다른 컴포넌트로 한 번 더 싸주어야 합니다.
11
+
12
+JSX는 일반 JS로 컴파일 함을 잊지말아야 합니다. 두개의 함수를 리턴하는 것은 문법적으로 맞지 않습니다. 이와 마찬가지로, 한 삼항 연산자 안에 한개 이상의 자식 컴포넌트를 넣으면 안됩니다.
\ No newline at end of file
docs/tips/06-style-props-value-px.ko-KR.md
new
+35
@@ -0,0 +1,35 @@
1
+---
2
+id: style-props-value-px-ko-KR
3
+title: 스타일 속성에서 특정 픽셀 값 넣는 간단한 방법
4
+layout: tips
5
+permalink: style-props-value-px-ko-KR.html
6
+prev: maximum-number-of-jsx-root-nodes-ko-KR.html
7
+next: children-props-type-ko-KR.html
8
+---
9
+
10
+인라인 `style` prop에서 픽셀 값을 넣을때, React가 자동으로 숫자뒤에 "px"를 붙여줍니다. 다음과 같이 동작합니다:
11
+
12
+```js
13
+var divStyle = {height: 10}; // "height:10px" 로 렌더링 됩니다.
14
+React.render(<div style={divStyle}>Hello World!</div>, mountNode);
15
+```
16
+
17
+더 자세한 이야기는 [Inline Styles](/react/tips/inline-styles-ko-KR.html)를 참고해 주시기 바랍니다.
18
+
19
+개발 하다보면 CSS 속성들이 단위 없이 그대로 유지되어야 할 때가 있을 겁니다. 아래의 프로퍼티들은 자동으로 "px"가 붙지 않는 속성 리스트 입니다:
20
+
21
+- `columnCount`
22
+- `fillOpacity`
23
+- `flex`
24
+- `flexGrow`
25
+- `flexShrink`
26
+- `fontWeight`
27
+- `lineClamp`
28
+- `lineHeight`
29
+- `opacity`
30
+- `order`
31
+- `orphans`
32
+- `strokeOpacity`
33
+- `widows`
34
+- `zIndex`
35
+- `zoom`
docs/tips/07-children-props-type.ko-KR.md
new
+49
@@ -0,0 +1,49 @@
1
+---
2
+id: children-props-type-ko-KR
3
+title: 자식 속성들의 타입
4
+layout: tips
5
+permalink: children-props-type-ko-KR.html
6
+prev: style-props-value-px-ko-KR.html
7
+next: controlled-input-null-value-ko-KR.html
8
+---
9
+
10
+컴포넌트의 자식들(`this.props.children`)은 대부분 컴포넌트의 배열로 들어갑니다:
11
+
12
+```js
13
+var GenericWrapper = React.createClass({
14
+ componentDidMount: function() {
15
+ console.log(Array.isArray(this.props.children)); // => true
16
+ },
17
+
18
+ render: function() {
19
+ return <div />;
20
+ }
21
+});
22
+
23
+React.render(
24
+ <GenericWrapper><span/><span/><span/></GenericWrapper>,
25
+ mountNode
26
+);
27
+```
28
+
29
+하지만 자식이 하나만 있는 경우, `this.props.children`는 _배열 래퍼(wrapper)없이_ 싱글 자식 컴포넌트가 됩니다. 이렇게 함으로써 배열 할당을 줄일 수 있습니다.
30
+
31
+```js
32
+var GenericWrapper = React.createClass({
33
+ componentDidMount: function() {
34
+ console.log(Array.isArray(this.props.children)); // => false
35
+
36
+ // 경고 : 산출된 5 값은 'hello' 스트링의 길이 입니다. 존재하지 않는 배열 래퍼의 길이인 1이 아닙니다!
37
+
38
+ console.log(this.props.children.length);
39
+ },
40
+
41
+ render: function() {
42
+ return <div />;
43
+ }
44
+});
45
+
46
+React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);
47
+```
48
+
49
+`this.props.children`을 쉽게 다룰 수 있도록 [React.Children utilities](/react/docs/top-level-api-ko-KR.html#react.children)를 제공하고 있습니다.
docs/tips/08-controlled-input-null-value.ko-KR.md
new
+22
@@ -0,0 +1,22 @@
1
+---
2
+id: controlled-input-null-value-ko-KR
3
+title: 제어되는 input 내의 null 값
4
+layout: tips
5
+permalink: controlled-input-null-value-ko-KR.html
6
+prev: children-props-type-ko-KR.html
7
+next: componentWillReceiveProps-not-triggered-after-mounting-ko-KR.html
8
+---
9
+
10
+[제어되는 컴포넌트들](/react/docs/forms-ko-KR.html)의 `value` 속성 값을 지정하면 유저에 의해 입력값을 바꿀 수 없습니다.
11
+
12
+`value`가 정해져 있는데도 입력값을 변경할 수 있는 문제를 겪고 있다면 실수로 `value`를 `undefined`나 `null`로 설정한 것일 수 있습니다.
13
+
14
+아래 짧은 예제가 있습니다; 렌더링 후, 잠시 뒤에 텍스트를 고칠 수 있는 상태가 되는 것을 확인 하실 수 있습니다.
15
+
16
+```js
17
+React.render(<input value="hi" />, mountNode);
18
+
19
+setTimeout(function() {
20
+ React.render(<input value={null} />, mountNode);
21
+}, 1000);
22
+```
docs/tips/09-componentWillReceiveProps-not-triggered-after-mounting.ko-KR.md
new
+13
@@ -0,0 +1,13 @@
1
+---
2
+id: componentWillReceiveProps-not-triggered-after-mounting-ko-KR
3
+title: 마운트 후에는 componentWillReceiveProps가 실행되지 않음.
4
+layout: tips
5
+permalink: componentWillReceiveProps-not-triggered-after-mounting-ko-KR.html
6
+prev: controlled-input-null-value-ko-KR.html
7
+next: props-in-getInitialState-as-anti-pattern-ko-KR.html
8
+---
9
+
10
+`componentWillReceiveProps`는 노드가 더해진 후엔 실행되지 않습니다. 이는 설계에 의한 것입니다. [다른 생명주기 메소드](/react/docs/component-specs-ko-KR.html)에서 요구사항에 적합한 것을 찾아보세요.
11
+
12
+이러한 이유는 `componentWillReceiveProps`에 종종 예전 props와 액션의 차이를 비교하는 로직이 들어가기 때문입니다. 마운트할 때 트리거되지 않으면, (예전 props가 없다고 해도) 메소드의 형태를 구별하는 데 도움이 됩니다.
13
+
docs/tips/10-props-in-getInitialState-as-anti-pattern.ko-KR.md
new
+67
@@ -0,0 +1,67 @@
1
+---
2
+id: props-in-getInitialState-as-anti-pattern-ko-KR
3
+title: getInitialState의 Props는 안티패턴
4
+layout: tips
5
+permalink: props-in-getInitialState-as-anti-pattern-ko-KR.html
6
+prev: componentWillReceiveProps-not-triggered-after-mounting-ko-KR.html
7
+next: dom-event-listeners-ko-KR.html
8
+---
9
+
10
+> 주의 :
11
+>
12
+> 이것은 React에만 국한된 팁이 아니고 안티패턴은 평범한 코드 속 에서도 종종 발생합니다. 이 글에서는 React로 간단하게 설명해 보겠습니다.
13
+
14
+부모로부터 받은 props를 이용하여 `getInitialState`에서 state를 생성할 때 종종 "진실의 소스", 예를 들어 진짜 데이터가 있는 곳을 중복으로 만들 때가 있습니다. 가능하던 안하던, 나중에 싱크되지 않는 확실한 값을 계산하고 또한 유지보수에도 문제를 야기합니다.
15
+
16
+**나쁜 예제:**
17
+
18
+```js
19
+var MessageBox = React.createClass({
20
+ getInitialState: function() {
21
+ return {nameWithQualifier: 'Mr. ' + this.props.name};
22
+ },
23
+
24
+ render: function() {
25
+ return <div>{this.state.nameWithQualifier}</div>;
26
+ }
27
+});
28
+
29
+React.render(<MessageBox name="Rogers"/>, mountNode);
30
+```
31
+
32
+더 나은 코드:
33
+
34
+```js
35
+var MessageBox = React.createClass({
36
+ render: function() {
37
+ return <div>{'Mr. ' + this.props.name}</div>;
38
+ }
39
+});
40
+
41
+React.render(<MessageBox name="Rogers"/>, mountNode);
42
+```
43
+
44
+(복잡한 로직이라, 메소드에서 계산하는 부분만 떼어 왔습니다.)
45
+
46
+하지만 여기서 싱크를 맞출 목적이 아님을 명확히 할 수 있다면, 이것은 안티 패턴이 **아닙니다.**
47
+
48
+
49
+
50
+```js
51
+var Counter = React.createClass({
52
+ getInitialState: function() {
53
+ // initial로 시작하는 메소드는 내부에서 받은 어떠한 값을 초기화 할 목적이 있다는 것을 나타냅니다.
54
+ return {count: this.props.initialCount};
55
+ },
56
+
57
+ handleClick: function() {
58
+ this.setState({count: this.state.count + 1});
59
+ },
60
+
61
+ render: function() {
62
+ return <div onClick={this.handleClick}>{this.state.count}</div>;
63
+ }
64
+});
65
+
66
+React.render(<Counter initialCount={7}/>, mountNode);
67
+```