From 5a32bb0971e98c24763870b7a6dcb3504e708921 Mon Sep 17 00:00:00 2001 From: Shim Won Date: Mon, 9 Mar 2015 20:14:36 +0900 Subject: [PATCH] Apply review - Up to 60e96ed --- docs/05-reusable-components.ko-KR.md | 54 ++++++++++++----------- docs/08-working-with-the-browser.ko-KR.md | 3 +- docs/ref-03-component-specs.ko-KR.md | 1 + docs/ref-05-events.ko-KR.md | 1 + docs/thinking-in-react.ko-KR.md | 2 +- 5 files changed, 33 insertions(+), 28 deletions(-) diff --git a/docs/05-reusable-components.ko-KR.md b/docs/05-reusable-components.ko-KR.md index 52af869b..be97be02 100644 --- a/docs/05-reusable-components.ko-KR.md +++ b/docs/05-reusable-components.ko-KR.md @@ -1,22 +1,23 @@ --- id: reusable-components-ko-KR title: 재사용가능한 컴포넌트 -permalink: reusable-components.ko-KR.html -prev: multiple-components.ko-KR.html -next: transferring-props.ko-KR.html +permalink: reusable-components-ko-KR.html +prev: multiple-components-ko-KR.html +next: transferring-props-ko-KR.html --- -인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포턴트 등)을 잘 정의된 인터페이스의 재사용가능한 컴포턴트로 분해합니다. 그런 방법으로 다음에 어떤 UI를 구축할 필요가 있을 때 훨씬 적은 코드로 만들 수 있는데, 즉 더 빠른 개발 시간, 더 적은 버그, 그리고 더 적은 용량으로 달서할 수 있다는 뜻입니다. +인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠. + ## Prop 검증 -앱을 개발할 때 컴포넌트들이 정확히 사용되었는지 확인하는게 도움이 됩니다. 저희는 이것을 `propTypes`를 명시하는 것으로 제공합니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 검증자(validator)의 범위를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발중일 때만 확인하기를 권합니다. 각각의 검증자들을 명시하는지에 대한 예제가 있습니다: +앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다. ```javascript React.createClass({ propTypes: { // 특정 JavaScript 프리미티브 타입에 대한 prop을 명시할 수 있습니다. - // 기본적으로 이것들은 모두 옵셔널입니다. + // 기본적으로 이것들은 모두 선택적입니다. optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, @@ -24,14 +25,15 @@ React.createClass({ optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, - // 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소, 그리고 이것들을 포함하는 배열 + // 렌더링될 수 있는 모든 것: 숫자, 문자열, 요소 + // 이것들을 포함하는 배열이나 엘리먼트 optionalNode: React.PropTypes.node, // React 엘리먼트 optionalElement: React.PropTypes.element, - // 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof 연산자를 - // 사용합니다. + // 클래스의 인스턴스 또한 prop으로 명시할 수 있습니다. JavaScript의 instanceof + // 연산자를 사용합니다. optionalMessage: React.PropTypes.instanceOf(Message), // 열거형처럼 특정 값들로만 prop을 제한해서 사용할 수 있습니다. @@ -50,22 +52,22 @@ React.createClass({ // 특정 타입의 속성값을 갖는 객체 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), - // 특정하 형태(shape)를 취하는 객체 + // 특정한 형태(shape)의 객체 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), - // 위에 언급된 것들을 `isRequired`로 체이닝해서 prop이 제공되지 않을 때 경고를 띄우도록 할 수도 - // 있습니다. + // 위에 언급된 것들을 `isRequired`로 연결해서 prop이 제공되지 않을 때 경고를 + // 띄우도록 할 수도 있습니다. requiredFunc: React.PropTypes.func.isRequired, // 어떤 데이터 타입도 가능 requiredAny: React.PropTypes.any.isRequired, - // 물론 커스텀 검증자도 명시할 수 있습니다. 검증이 실패했을 때 Error 객체를 리턴해야합니다. - // `console.warn`을 사용하거나 throw를 사용하면 안되고 `oneOfType` 안에서는 작동하지 - // 않습니다. + // 물론 사용자 정의 검증자도 지정할 수 있습니다. 이는 검증이 실패했을 때 + // Error 객체를 리턴해야합니다. `console.warn`을 이나 throw를 하면 안됩니다. + // 그렇게하면 `oneOfType` 안에서 작동하지 않습니다. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); @@ -79,7 +81,7 @@ React.createClass({ ## 기본 Prop 값 -React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다: +React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다. ```javascript var ComponentWithDefaultProps = React.createClass({ @@ -92,16 +94,16 @@ var ComponentWithDefaultProps = React.createClass({ }); ``` -`getDefaultProps()`의 결과값은 캐싱이 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록해주는데 사용됩니다. 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용하도록 해줍니다. +`getDefaultProps()`의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 `this.props.value`가 값을 가질 수 있도록 해주는데 사용됩니다.`getDefaultProps()`를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다. -## Prop 전달하기: 기본 +## Prop 전달하기: 단축 -React 컴포넌트의 흔한 타입 중 하나는 단순히 기본 HTML을 확장하는 것입니다. 타이핑을 아끼기 위해 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 때가 생길 것입니다. JSX의 _spread_ 문법을 사용해 이렇게 만들 수 있습니다: +React 컴포넌트의 흔히 그냥 기본 HTML을 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 _spread_ 문법을 사용하면 이렇게 할 수 있습니다. ```javascript var CheckLink = React.createClass({ render: function() { - // 아무 prop들을 받아서 CheckLink에 넘겨 에 복사합니다. + // 모든 prop을 받아서 CheckLink에 넘기고 에 복사합니다. return {'√ '}{this.props.children}; } }); @@ -114,9 +116,9 @@ React.render( ); ``` -## Single Child +## 단일 자식 -`React.PropTypes.element`을 통해 컴포넌트에 자식을 단 하나만 보내도록 명시할 수 있습니다. +`React.PropTypes.element`을 통해 컴포넌트에 한 자식만 보내도록 명시할 수 있습니다. ```javascript var MyComponent = React.createClass({ @@ -137,9 +139,9 @@ var MyComponent = React.createClass({ ## 믹스인 -컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 기능이 약간 겹치는 너무 다른 컴포넌트가 있을 수 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](http://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 이 문제를 해결하기 위해 `mixins`를 제공합니다. +컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](http://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다. -한가지 흔한 경우는 주기적으로 업데이트되는 컴포넌트입니다. `setInterval()`을 사용하면 쉽지만, 더이상 원치 않을 때 메모리를 아끼기 위해 주기를 취소하는 것은 중요합니다. React는 컴포넌트가 막 생성될 때 혹은 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다. +예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다. ```javascript var SetIntervalMixin = { @@ -160,7 +162,7 @@ var TickTock = React.createClass({ return {seconds: 0}; }, componentDidMount: function() { - this.setInterval(this.tick, 1000); 믹스인에 있는 메소드를 호출 + this.setInterval(this.tick, 1000); // 믹스인에 있는 메소드를 호출 }, tick: function() { this.setState({seconds: this.state.seconds + 1}); @@ -180,4 +182,4 @@ React.render( ); ``` -믹스인의 괜찮은 점은 컴포넌트가 같은 생명주기 메소드를 사용할 때(예를 들어, 컴포넌트가 사라질 때 뭔가 정리하려는 믹스인들이 많이 있다면) 모든 생명주기 메소드들이 실행되는게 보장된다. 믹스인에 정의된 메소드들은 믹스인이 나열된 순서대로 컴포넌트의 메소드 호출 다음에 실행된다. \ No newline at end of file +믹스인의 괜찮은 점은 컴포넌트가 여러 믹스인을 사용하고 여러 믹스인에서 같은 생명주기 메소드를 사용할 때(예를 들어, 여러 믹스인에서 컴포넌트가 사라질 때 뭔가 정리하려 한다면) 모든 생명주기 메소드들의 실행은 보장됩니다. 믹스인에 정의된 메소드은 컴포넌트의 메소드가 호출됨에 따라 믹스인이 나열된 순서대로 실행됩니다. diff --git a/docs/08-working-with-the-browser.ko-KR.md b/docs/08-working-with-the-browser.ko-KR.md index 5bb96ded..3772799b 100644 --- a/docs/08-working-with-the-browser.ko-KR.md +++ b/docs/08-working-with-the-browser.ko-KR.md @@ -58,9 +58,10 @@ React.render( ## Refs 심화 -[refs 심화](/react/docs/more-about-refs.html) 문서에서 refs를 효율적으로 사용하는 법을 포함해 더 많은 내용을 익혀보세요. +[refs 심화](/react/docs/more-about-refs-ko-KR.html) 문서에서 refs를 효율적으로 사용하는 법을 포함해 더 많은 내용을 익혀보세요. + ## 컴포넌트 생명주기 컴포넌트의 생명주기에는 세 가지 주요 부분이 있습니다: diff --git a/docs/ref-03-component-specs.ko-KR.md b/docs/ref-03-component-specs.ko-KR.md index 3156aa1d..3efd367a 100644 --- a/docs/ref-03-component-specs.ko-KR.md +++ b/docs/ref-03-component-specs.ko-KR.md @@ -146,6 +146,7 @@ componentWillReceiveProps: function(nextProps) { > `componentWillReceiveState`에 해당하는 메소드는 없습니다. prop이 변할 때 state가 바뀔 수는 있지만, 그 역은 불가능합니다. state의 변화에 따라 작업을 실행해야 하면 `componentWillUpdate`를 사용하세요. + ### 업데이트 시: shouldComponentUpdate ```javascript diff --git a/docs/ref-05-events.ko-KR.md b/docs/ref-05-events.ko-KR.md index 4292df66..de02774f 100644 --- a/docs/ref-05-events.ko-KR.md +++ b/docs/ref-05-events.ko-KR.md @@ -95,6 +95,7 @@ DOMEventTarget relatedTarget ``` + ### 폼 이벤트 이벤트 이름: diff --git a/docs/thinking-in-react.ko-KR.md b/docs/thinking-in-react.ko-KR.md index b469aae8..1c6a3434 100644 --- a/docs/thinking-in-react.ko-KR.md +++ b/docs/thinking-in-react.ko-KR.md @@ -71,7 +71,7 @@ React의 많은 뛰어난 점들 중 하나는 생각을 하면서 애플리케 이 단계의 결과, 자료 모델을 그리는 재활용 가능한 컴포넌트의 라이브러리를 갖게 되었습니다. 정적버전 이후로 컴포넌트들은 오직 `render()` 메소드만 갖고 있습니다. 계층구조상 가장 위의 컴포넌트 (`FilterableProductTable`)은 자료 모델을 prop으로 취할 것입니다. 자료 모델이 변했을 때, `React.render()`를 다시 부르면 업데이트 됩니다. 어떻게 UI가 업데이트 되는지 참 알기 쉽습니다. 자료가 바뀌어도 처리해야 할 복잡한 일이 아무것도 없습니다. React의 **단일 방향 자료 흐름** (혹은 *단일방향 바인딩*)이 모든것을 모듈식으로, 추론하기 쉽게, 그리고 빠르게 유지해줍니다. -이 단계를 진행하는 데에 도움이 필요하시다면, [React 문서](http://facebook.github.io/react/docs/)를 참조하세요. +이 단계를 진행하는 데에 도움이 필요하시다면, [React 문서](/react/docs/getting-started-ko-KR.html)를 참조하세요. ### 잠시만: props vs state