dc56073d68 · samitouri/QOS-React-2

docs/docs/04-multiple-components.ko-KR.md

+2 -1

@@ -152,7 +152,8 @@ var MyComponent = React.createClass({

152 );

153 }

154 });

155 -

155 +```

156 +```javascript

157 // 맞음 :)

158 var ListItemWrapper = React.createClass({

159 render: function() {

docs/docs/07-forms.ko-KR.md

+9 -2

@@ -32,6 +32,7 @@ HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의

32 >

33 > `<input>`, `<textarea>`에서는 `onChange`가 DOM의 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 이벤트 핸들러와 같은 기능을 제공하므로 일반적인 경우에는 `onChange`를 사용하세요.

34

35 +<a name="controlled-components"></a>

36 ## 제어되는(controlled) 컴포넌트

37

38 `value`가 설정된 `<input>`은 *제어되는* 컴포넌트입니다. 제어되는 `<input>`에서, 렌더 엘리먼트의 값은 항상 `value` prop을 반영합니다. 예를 들어,

@@ -80,6 +81,8 @@ HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의

81

82 이것은 빈 값으로 시작되는 input을 렌더합니다. 임의의 사용자 입력은 즉시 렌더된 엘리먼트에 반영됩니다. 값의 업데이트를 감시하길 원한다면, 제어되는 컴포넌트처럼 `onChange` 이벤트를 사용할 수 있습니다.

83

84 +### 기본 값

85 +

86 비어 있지 않은 값으로 초기화하길 원한다면, `defaultValue` prop로 할 수 있습니다. 예를 들어,

87

88 ```javascript

@@ -92,6 +95,10 @@ HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의

95

96 마찬가지로, `<input>`은 `defaultChecked`를 지원하고 `<select>`는 `defaultValue`를 지원합니다.

97

98 +> 주의:

99 +>

100 +> `defaultValue`, `defaultChecked` prop은 최초 렌더에서만 사용됩니다. 뒤에 일어나는 렌더에서 값을 업데이트할 필요가 있다면, [제어되는(controlled) 컴포넌트](#controlled-components)를 사용하셔야 합니다.

101 +

102

103 ## 심화 주제

104

@@ -104,7 +111,7 @@ React에서 `<input>`같은 폼 컴포넌트를 사용하면, 전통적인 폼 H

111 <input type="text" name="title" value="Untitled" />

112 ```

113

107 -이렇게 하면 input은 `Untitled` 값으로 *초기화* 됩니다. 사용자가 input을 업데이트할 때, 노드의 value *프로퍼티*가 변경될 것입니다. 하지만, `node.getAttribute('value')`은 여전히 초기화 때 사용했던 값인 `Untitled`를 리턴합니다.

114 +이렇게 하면 input은 `Untitled` 값으로 *초기화* 됩니다. 사용자가 input을 업데이트할 때, 노드의 `value` *프로퍼티*가 변경될 것입니다. 하지만, `node.getAttribute('value')`은 여전히 초기화 때 사용했던 값인 `Untitled`를 리턴합니다.

115

116 HTML과 다르게, React 컴포넌트는 초기화 시점 뿐만 아니라, 어떤 시점이라도 반드시 뷰의 state를 나타내야 합니다. 예를 들어 React에서

117

@@ -122,7 +129,7 @@ HTML과 다르게, React 컴포넌트는 초기화 시점 뿐만 아니라, 어

129 HTML에서, `<textarea>`의 값은 보통 그것의 자식들로 설정됩니다.

130

131 ```html

125 -

132 +

133 <textarea name="description">이것은 설명입니다.</textarea>

134 ```

135

docs/docs/08-working-with-the-browser.ko-KR.md

+1 -1

@@ -83,7 +83,7 @@ React는 이 프로세스에 훅을 지정할 수 있는 생명주기 메소드

83 ### Updating

84

85 * `componentWillReceiveProps(object nextProps)`는 마운트된 컴포넌트가 새로운 props을 받을 때 호출됩니다. 이 메소드는 `this.props`와 `nextProps`을 비교하여 `this.setState()`를 사용해 상태 변환을 수행하는데 사용되야 합니다.

86 -* `shouldComponentUpdate(object nextProps, object nextState): boolean`는 컴포넌트가 어떤 변경이 DOM의 업데이트를 보증하는지 결정해야 할 때 호출됩니다. 최적화하려면, React가 업데이트를 무시해야할 때 `this.props`와 `nextProps`를, `this.state`와 `nextState`를 비교해 false를 리턴하면 됩니다.

86 +* `shouldComponentUpdate(object nextProps, object nextState): boolean`는 컴포넌트가 어떤 변경이 DOM의 업데이트를 보증하는지 결정해야 할 때 호출됩니다. 최적화하려면, React가 업데이트를 무시해야할 때 `this.props`와 `nextProps`를, `this.state`와 `nextState`를 비교해 `false`를 리턴하면 됩니다.

87 * `componentWillUpdate(object nextProps, object nextState)`는 업데이트가 발생하기 직전에 호출됩니다. 이 시점에는 `this.setState()`를 호출할 수 없습니다.

88 * `componentDidUpdate(object prevProps, object prevState)`는 업데이트가 발생한 후 즉시 호출됩니다.

89

docs/docs/08.1-more-about-refs.ko-KR.md

+3 -3

@@ -48,7 +48,7 @@ render 메소드를 통해 UI 구조를 얻은 다음, 반환된 컴포넌트

48 이는 `render()`에서 반환된 무언가를 "계속 유지할 수" 없으며 아무런 의미도 없을 것이라는 뜻입니다.

49

50 ```javascript

51 - // 반례: 이렇게 하면 안됩니다!

51 + // 안티패턴: 이것은 동작하지 않습니다.

52 render: function() {

53 var myInput = <input />; // 여기서 메소드를 호출할 겁니다.

54 this.rememberThisInput = myInput; // 언젠가 미래의 특정 시점에 입력할 거에요! YAY!

@@ -61,7 +61,7 @@ render 메소드를 통해 UI 구조를 얻은 다음, 반환된 컴포넌트

61 }

62 ```

63

64 -이 반례에서 `<input />`은 단지 `<input />`의 *서술*일 뿐입니다. 이 서술은 `<input />`에 대한 *진짜* **지원 인스턴스(backing instance)**를 생성하는 데 사용됩니다.

64 +이 예제에서 `<input />`은 단지 `<input />`의 *서술*일 뿐입니다. 이 서술은 `<input />`에 대한 *진짜* **지원 인스턴스(backing instance)**를 생성하는 데 사용됩니다.

65

66 자 그럼 어떻게 *진짜* input의 지원 인스턴스를 다룰까요?

67

@@ -130,7 +130,7 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특

130 });

131 ```

132

133 -이 예제에서 render 함수는 `<input />` 인스턴스의 서술을 반환했지만, 진짜 인스턴스는 `this.refs.theInput`을 통해 접근할 수 있었습니다. render에서 `ref="theInput"`을 가진 컴포넌트가 반환된 동안, `this.refs.theInput`은 적절한 인스턴스에 접근합니다. 이는 `<Typeahead ref="myTypeahead" />`처럼 DOM이 아닌 고수준의 컴포넌트에서도 동작합니다.

133 +이 예제에서 render 함수는 `<input />` 인스턴스의 서술을 반환했지만, 진짜 인스턴스는 `this.refs.theInput`을 통해 접근할 수 있었습니다. `render`에서 `ref="theInput"`을 가진 컴포넌트가 반환된 동안, `this.refs.theInput`은 적절한 인스턴스에 접근합니다. 이는 `<Typeahead ref="myTypeahead" />`처럼 DOM이 아닌 고수준의 컴포넌트에서도 동작합니다.

134

135

136 ## 요약

docs/docs/10.1-animation.ko-KR.md

+2 -2

@@ -64,11 +64,11 @@ var TodoList = React.createClass({

64 ```css

65 .example-enter {

66 opacity: 0.01;

67 - transition: opacity .5s ease-in;

67 }

68

69 .example-enter.example-enter-active {

70 opacity: 1;

71 + transition: opacity .5s ease-in;

72 }

73 ```

74

@@ -77,11 +77,11 @@ var TodoList = React.createClass({

77 ```css

78 .example-leave {

79 opacity: 1;

80 - transition: opacity .5s ease-in;

80 }

81

82 .example-leave.example-leave-active {

83 opacity: 0.01;

84 + transition: opacity .5s ease-in;

85 }

86 ```

87

docs/docs/10.2-form-input-binding-sugar.ko-KR.md

+1 -1

@@ -22,7 +22,7 @@ React에서 이는 "change" 이벤트를 감시하고 데이터 소스(보통 DO

22

23 > 주의:

24 >

25 -> ReactLink는 얇은 레퍼고 `onChange`/`setState()`패턴 부분의 관례일 뿐입니다. React 애플리케이션에서의 데이터 흐름을 근본적으로 바꾸지는 않습니다.

25 +> `ReactLink`는 얇은 레퍼고 `onChange`/`setState()`패턴 부분의 관례일 뿐입니다. React 애플리케이션에서의 데이터 흐름을 근본적으로 바꾸지는 않습니다.

26

27 ## ReactLink: 적용 전후

28

docs/docs/11-advanced-performance.ko-KR.md

+2 -2

@@ -131,13 +131,13 @@ React.createClass({

131

132 ## 구원자 Immutable-js

133

134 -[Immutable-js](https://github.com/facebook/immutable-js)는 Lee Byron이 만들고 Facebook이 오픈소스화 한 Javascript 컬렉션 라이브러리입니다. 이는 *구조의 공유(structural sharing)*를 통해 *불변의 영속적인(immutable persistent)* 컬렉션을 제공합니다. 이러한 속성이 무엇을 의미하는지 살펴보죠:

134 +[Immutable-js](https://github.com/facebook/immutable-js)는 Lee Byron이 만들고 Facebook이 오픈소스화 한 JavaScript 컬렉션 라이브러리입니다. 이는 *구조의 공유(structural sharing)*를 통해 *불변의 영속적인(immutable persistent)* 컬렉션을 제공합니다. 이러한 속성이 무엇을 의미하는지 살펴보죠:

135

136 * *불변성(Immutable)*: 컬렉션이 한번 생성되면, 이 후 다른 시점에 변경될 수 없습니다.

137 * *영속성(Persistent)*: 새로운 컬렉션이 이전의 컬렉션이나 셋(set) 같은 뮤테이션(mutation)에서 생성될 수 있습니다. 기존의 컬렉션은 새로운 컬렉션이 생성된 후에도 여전히 유효합니다.

138 * *구조의 공유(Structural Sharing)*: 새로운 컬렉션은 가능한 한 원래의 컬렉션과 같은 구조를 사용해 생성됩니다. 공간 효율성과 적절한 성능을 위해 복사를 최소화합니다.

139

140 -불변성은 변경의 추적을 비용을 줄여줍니다; 변경은 항상 새로운 객체에만 발생하기 때문에 객체에 대한 참조가 변경될 때만 확인하면 됩니다. 예를 들어 일반적인 JavaScript 코드에서는:

140 +불변성은 변경의 추적을 비용을 줄여줍니다; 변경은 항상 새로운 객체에만 발생하기 때문에 객체에 대한 참조가 변경될 때만 확인하면 됩니다. 예를 들어 일반적인 이 JavaScript 코드에서는:

141

142 ```javascript

143 var x = { foo: "bar" };

docs/docs/getting-started.ko-KR.md

+2

@@ -65,6 +65,8 @@ React.render(

65 <script type="text/jsx" src="src/helloworld.js"></script>

66 ```

67

68 +크롬 같은 몇몇 브라우저에서는 HTTP을 통해 제공되는 파일이 아니면 로드에 실패하므로 주의하세요.

69 +

70 ### 오프라인 변환

71

72 먼저 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요):

docs/docs/ref-02-component-api.ko-KR.md

+4 -4

@@ -67,11 +67,11 @@ replaceState(object nextState[, function callback])

67 forceUpdate([function callback])

68 ```

69

70 -`render()` 메소드가 `this.props`나 `this.state`가 아닌 다른 곳에서 데이터를 읽어오는 경우 `forceUpdate()`를 호출하여 React가 `render()`를 다시 실행하도록 만들 수 있습니다. `this.state`를 직접 변경하는 경우에도 `forceUpdate()`를 호출해야 합니다.

70 +기본적으로, 컴포넌트의 state나 props가 변경되면, 컴포넌트는 다시 렌더됩니다. 하지만 이런 변경이 묵시적이거나(예를들어 객체의 변경 없이 깊이 있는 데이터만 변경된 경우) `render()` 함수가 다른 값에 의존하는 경우, `forceUpdate()`를 호출해 React에게 `render()`를 다시 실행할 필요가 있다고 알릴 수 있습니다.

71

72 `forceUpdate()`를 호출하면 `shouldComponentUpdate()`를 생략하고 해당 컴포넌트 `render()` 함수가 호출됩니다. 각 자식 컴포넌트에 대해서는 `shouldComponentUpdate()`를 포함해 보통 라이프 사이클 메서드를 호출합니다. React는 마크업이 변경된 경우에만 DOM을 업데이트합니다.

73

74 -특별한 경우가 아니면 `forceUpdate()`는 되도록 피하시고 `render()`에서는 `this.props`와 `this.state`에서만 읽어오세요. 그렇게 하는 것이 애플리케이션을 훨씬 단순하고 효율적으로 만들어줍니다.

74 +특별한 경우가 아니면 `forceUpdate()`는 되도록 피하시고 `render()`에서는 `this.props`와 `this.state`에서만 읽어오세요. 그렇게 하는 것이 컴포넌트를 "순수"하게 하고 애플리케이션을 훨씬 단순하고 효율적으로 만들어줍니다.

75

76

77 ### getDOMNode

@@ -110,11 +110,11 @@ setProps(object nextProps[, function callback])

110

111 외부 JavaScript 애플리케이션과 연동하는 경우 `React.render()`로 렌더링된 React 컴포넌트에 변경을 알리고 싶을 때가 있습니다.

112

113 -최상위 컴포넌트를 업데이트할 때 `React.render()`를 같은 노드에 다시 호출하는 것이 바람직한 방법이지만, `setProps()`를 호출해서 props를 바꾸고 재렌더링을 발생시킬 수 있습니다. 콜백 함수를 추가로 넘기면 `setProps`가 완료되고 컴포넌트가 다시 렌더링된 다음에 한번 호출됩니다.

113 +최상위 컴포넌트에서 `setProps()`를 호출하면 프로퍼티를 변경하고 렌더를 다시 발생합니다. 거기에 콜백 함수를 넘기면 `setProps`가 완료되고 컴포넌트가 다시 렌더링된 다음에 한번 호출됩니다.

114

115 > 주의:

116 >

117 -> 가능하다면 `React.render()`를 다시 호출하는 선언적인 방법이 더 바람직합니다. 그렇게 하는 편이 업데이트에 대해 생각하는 것을 쉽게 만듭니다. (두가지 방식에 눈에 띄는 성능 차이는 없습니다.)

117 +> 가능하다면 이것 대신 `React.render()`를 같은 노드에서 다시 호출하는 선언적인 방법이 더 바람직합니다. 그렇게 하는 편이 업데이트에 대해 생각하는 것을 쉽게 만듭니다. (두가지 방식에 눈에 띄는 성능 차이는 없습니다.)

118 >

119 > 이 메소드는 최상위 컴포넌트에만 호출 가능합니다. 다시 말해, `React.render()`에 바로 넘긴 컴포넌트에서만 사용할 수 있고 자식에서는 불가능합니다. 자식 컴포넌트에 `setProps()`를 사용하고 싶다면, 그 대신 반응적인 업데이트의 장점을 활용하여 `render()` 안에서 자식 컴포넌트를 만들 때 새로운 prop을 넘기세요.

120 >

docs/docs/tutorial.ko-KR.md

+2 -2

@@ -54,7 +54,7 @@ next: thinking-in-react-ko-KR.html

54 </html>

55 ```

56

57 -다음 진행을 위해, 위의 스크립트 태그안에 JavaScript 코드를 작성합니다.

57 +다음 진행을 위해, 위의 스크립트 태그안에 JavaScript 코드를 작성합니다. 각 단계를 추가한 다음 index.html 파일을 브라우저에서 열어서 진행을 확인하세요.

58

59 > 주의:

60 >

@@ -379,7 +379,7 @@ var CommentBox = React.createClass({

379

380 ### state 업데이트하기

381

382 -컴포넌트의 최초 생성 시에, 서버에서 GET 방식으로 JSON을 넘겨받아 최신의 데이터가 state에 반영되길 원했습니다. 실제 애플리케이션에선 이것이 동적인 엔드포인트이지만, 이 예제에서는 정적 JSON 파일을 사용해서 간단하게 만들어보겠습니다.

382 +컴포넌트의 최초 생성 시에, 서버에서 GET 방식으로 JSON을 넘겨받아 최신의 데이터가 state에 반영되길 원했습니다. 실제 애플리케이션에선 이것이 동적인 엔드포인트이지만, 이 예제에서는 단순히하기 위해 comments의 배열이 담긴 정적 JSON 파일 `public/comments.json`을 사용하겠습니다.

383

384 ```javascript

385 // tutorial13.json

docs/tips/03-if-else-in-JSX.ko-KR.md

+29 -2

@@ -33,7 +33,7 @@ React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

33 React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

34 ```

35

36 -삼항 연산자가 충분하지 않다면 `if` 문을 사용해 어떤 컴포넌트가 사용될 지 결정할 수 있습니다.

36 +삼항 연산자가 충분하지 않다면 JSX구문 밖에서 `if` 문을 사용해 어떤 컴포넌트가 사용될 지 결정할 수 있습니다.

37

38 ```js

39 var loginButton;

@@ -48,7 +48,34 @@ return (

48 <Home />

49 {loginButton}

50 </nav>

51 -)

51 +);

52 ```

53

54 +"inline"을 좀더 선호한다면, JSX _안에_ [즉시 평가되는 함수 표현식](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)을 선언하세요.

55 +

56 +```js

57 +return (

58 + <section>

59 + <h1>Color</h1>

60 + <h3>Name</h3>

61 + <p>{this.state.color || "white"}</p>

62 + <h3>Hex</h3>

63 + <p>

64 + {() => {

65 + switch (this.state.color) {

66 + case "red": return "#FF0000";

67 + case "green": return "#00FF00";

68 + case "blue": return "#0000FF";

69 + default: return "#FFFFFF";

70 + }

71 + }()}

72 + </p>

73 + </section>

74 +);

75 +```

76 +

77 +> 주의:

78 +>

79 +> 위의 예제에 있는 ES6 [화살표 함수](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)는 `this`의 값을 구문적으로 바인드하기위해 사용되었습니다.

80 +

81 [JSX 컴파일러](/react/jsx-compiler.html)로 지금 바로 사용해보세요.

Update Korean translation to e928c65