Translate tips 05..10

- Up to 3fd6ac5
2025-11-01 09:12:30 +00:00 · 2015-03-28 08:51:52 +09:00
parent 45a3332a38
commit 0b3fe6f47e
6 changed files with 198 additions and 0 deletions
@@ -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로 컴파일 함을 잊지말아야 합니다. 두개의 함수를 리턴하는 것은 문법적으로 맞지 않습니다. 이와 마찬가지로, 한 삼항 연산자 안에 한개 이상의 자식 컴포넌트를 넣으면 안됩니다.
@@ -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(<div style={divStyle}>Hello World!</div>, 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`
@@ -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 <div />;
+  }
+});
+
+React.render(
+  <GenericWrapper><span/><span/><span/></GenericWrapper>,
+  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 <div />;
+  }
+});
+
+React.render(<GenericWrapper>hello</GenericWrapper>, mountNode);
+```
+
+`this.props.children`을 쉽게 다룰 수 있도록 [React.Children utilities](/react/docs/top-level-api-ko-KR.html#react.children)를 제공하고 있습니다.
@@ -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(<input value="hi" />, mountNode);
+
+setTimeout(function() {
+  React.render(<input value={null} />, mountNode);
+}, 1000);
+```
@@ -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가 없다고 해도) 메소드의 형태를 구별하는 데 도움이 됩니다.
+
@@ -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 <div>{this.state.nameWithQualifier}</div>;
+  }
+});
+
+React.render(<MessageBox name="Rogers"/>, mountNode);
+```
+
+더 나은 코드:
+
+```js
+var MessageBox = React.createClass({
+  render: function() {
+    return <div>{'Mr. ' + this.props.name}</div>;
+  }
+});
+
+React.render(<MessageBox name="Rogers"/>, 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 <div onClick={this.handleClick}>{this.state.count}</div>;
+  }
+});
+
+React.render(<Counter initialCount={7}/>, mountNode);
+```