From 8d0937e60d55ab516fb139148e0ad4c2b8d3de3c Mon Sep 17 00:00:00 2001 From: Shim Won Date: Fri, 24 Apr 2015 09:15:46 +0900 Subject: [PATCH] Update Translation to 0183f70 --- docs/docs/02-displaying-data.ko-KR.md | 2 +- docs/docs/06-transferring-props.ko-KR.md | 4 +- docs/docs/10.5-clone-with-props.ko-KR.md | 39 ++++++++++++------- docs/docs/ref-04-tags-and-attributes.ko-KR.md | 23 +++++------ docs/docs/tutorial.ko-KR.md | 2 + ...o-KR.md => 17-children-undefined.ko-KR.md} | 2 +- .../19-dangerously-set-inner-html.ko-KR.md | 2 +- 7 files changed, 44 insertions(+), 30 deletions(-) rename docs/tips/{17-children-undefined-ko-KR.md => 17-children-undefined.ko-KR.md} (87%) diff --git a/docs/docs/02-displaying-data.ko-KR.md b/docs/docs/02-displaying-data.ko-KR.md index e1c9c7cd0d..59d6bb7d93 100644 --- a/docs/docs/02-displaying-data.ko-KR.md +++ b/docs/docs/02-displaying-data.ko-KR.md @@ -31,7 +31,7 @@ UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하 ``` -문서의 나머지에서, 코드가 위와 같은 HTML 템플릿에 들어갔다고 가정하고 JavaScript 코드에만 집중할 것입니다. 위의 주석 부분을 다음과 같은 JavaScript 코드로 바꿔 보세요: +문서의 나머지에서, 코드가 위와 같은 HTML 템플릿에 들어갔다고 가정하고 JavaScript 코드에만 집중할 것입니다. 위의 주석 부분을 다음과 같은 JSX 코드로 바꿔 보세요: ```javascript var HelloWorld = React.createClass({ diff --git a/docs/docs/06-transferring-props.ko-KR.md b/docs/docs/06-transferring-props.ko-KR.md index 39093bd42d..757504c5ec 100644 --- a/docs/docs/06-transferring-props.ko-KR.md +++ b/docs/docs/06-transferring-props.ko-KR.md @@ -11,13 +11,13 @@ React에서는 컴포넌트를 감싸서 추상화하는 것이 일반적인 패 [JSX 스프레드 어트리뷰트](/react/docs/jsx-spread-ko-KR.html)를 통해 props에 추가적인 값을 병합할 수 있습니다. ```javascript -return ; + ``` 만약 JSX를 사용하지 않는다면 ES6의 `Object.assign`나 Underscore의 `_.extend` 같은 객체 헬퍼를 사용할 수 있습니다: ```javascript -return Component(Object.assign({}, this.props, { more: 'values' })); +React.createElement(Component, Object.assign({}, this.props, { more: 'values' })); ``` 이 튜토리얼의 나머지 부분은 모범 답안을 소개할 것입니다. JSX와 실험적인 ES7 구문을 사용합니다. diff --git a/docs/docs/10.5-clone-with-props.ko-KR.md b/docs/docs/10.5-clone-with-props.ko-KR.md index d2ca84a837..3b7bbc0b2c 100644 --- a/docs/docs/10.5-clone-with-props.ko-KR.md +++ b/docs/docs/10.5-clone-with-props.ko-KR.md @@ -6,18 +6,29 @@ prev: test-utils-ko-KR.html next: create-fragment-ko-KR.html --- -드문 경우긴 하지만 엘리먼트에서 소유하지 않은 엘리먼트의 props를 변경하고 싶을 때가 있습니다 (`this.props.children`로 전달된 엘리먼트의 `className` 변경 같은 경우). 아니면 전달된 엘리먼트의 복사본 여러 개를 만들고 싶을 수도 있습니다. 이는 `cloneWithProps()`로 할 수 있습니다. - -#### `ReactElement React.addons.cloneWithProps(ReactElement element, object? extraProps)` - -`element`를 얕게 복사하고 `extraProps`로 넘긴 props를 머지합니다. `className`과 `style` props는 지능적인 방법으로 머지됩니다. - > 주의: -> -> `cloneWithProps`는 `key`를 클론된 엘리먼트에 전달하지 않습니다. 키를 보존하고 싶으시면, `extraProps` 객체에 넣으세요. -> -> ```js -> var clonedElement = cloneWithProps(originalElement, { key : originalElement.key }); -> ``` -> -> 비슷하게 `ref`도 유지되지 않습니다. +> `cloneWithProps`는 비추천입니다. 대신 [React.cloneElement](top-level-api.html#react.cloneelement)를 사용하세요. + +드문 경우긴 하지만 원래 엘리먼트와 다른 prop을 가진 React 엘리먼트의 복사본을 만들고 싶을 때가 있습니다. 예를 들면 `this.props.children`에 클론한 엘리먼트를 넘기고 다른 prop으로 렌더링하는 경우 입니다. + +```js +var _makeBlue = function(element) { + return React.addons.cloneWithProps(element, {style: {color: 'blue'}}); +}; + +var Blue = React.createClass({ + render: function() { + var blueChildren = React.Children.map(this.props.children, _makeBlue); + return
{blueChildren}
; + } +}); + +React.render( + +

This text is blue.

+ , + document.getElementById('container') +); +``` + +`cloneWithProps`는 `key`나 `ref`를 클론된 엘리먼트에 전달하지 않습니다. `className`, `style` prop은 자동으로 머지됩니다. diff --git a/docs/docs/ref-04-tags-and-attributes.ko-KR.md b/docs/docs/ref-04-tags-and-attributes.ko-KR.md index a90e46e105..6bd7e760f5 100644 --- a/docs/docs/ref-04-tags-and-attributes.ko-KR.md +++ b/docs/docs/ref-04-tags-and-attributes.ko-KR.md @@ -53,23 +53,24 @@ React는 모든 `data-*`, `aria-*` 어트리뷰트와 밑에 있는 모든 어 ``` accept acceptCharset accessKey action allowFullScreen allowTransparency alt -async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked classID -className cols colSpan content contentEditable contextMenu controls coords -crossOrigin data dateTime defer dir disabled download draggable encType form -formAction formEncType formMethod formNoValidate formTarget frameBorder height -hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest -marginHeight marginWidth max maxLength media mediaGroup method min multiple -muted name noValidate open pattern placeholder poster preload radioGroup -readOnly rel required role rows rowSpan sandbox scope scoped scrolling seamless -selected shape size sizes span spellCheck src srcDoc srcSet start step style -tabIndex target title type useMap value width wmode +async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked +classID className colSpan cols content contentEditable contextMenu controls +coords crossOrigin data dateTime defer dir disabled download draggable encType +form formAction formEncType formMethod formNoValidate formTarget frameBorder +headers height hidden high href hrefLang htmlFor httpEquiv icon id label lang +list loop low manifest marginHeight marginWidth max maxLength media mediaGroup +method min multiple muted name noValidate open optimum pattern placeholder +poster preload radioGroup readOnly rel required role rowSpan rows sandbox scope +scoped scrolling seamless selected shape size sizes span spellCheck src srcDoc +srcSet start step style tabIndex target title type useMap value width wmode ``` 덧붙여, 이런 비표준 어트리뷰트도 지원됩니다. - 모바일 사파리를 위한 `autoCapitalize autoCorrect`. - [오픈 그래프](http://ogp.me/) 메타 태그를 위한 `property`. -- [HTML5 마이크로데이터](http://schema.org/docs/gs.html)를 위한 `itemProp itemScope itemType itemRef itemId`. +- [HTML5 마이크로데이터](http://schema.org/docs/gs.html)를 위한 `itemProp itemScope itemType itemRef itemID`. +- 인터넷 익스플로어를 위한 `unselectable`. 컴포넌트에 직접 HTML 문자열을 넣을 때 사용하는, React 전용 어트리뷰트 `dangerouslySetInnerHTML`([자세한 정보는 여기](/react/docs/special-non-dom-attributes-ko-KR.html))도 있습니다. diff --git a/docs/docs/tutorial.ko-KR.md b/docs/docs/tutorial.ko-KR.md index 1e3ea66c02..b93dc87c00 100644 --- a/docs/docs/tutorial.ko-KR.md +++ b/docs/docs/tutorial.ko-KR.md @@ -88,6 +88,8 @@ React.render( ); ``` +네이티브 HTML 엘리먼트 이름은 소문자로 시작하고 커스텀 React 클래스 이름은 대문자로 시작합니다. + #### JSX 문법 JavsScript 안의 유사 XML 구문이 먼저 눈에 띌 것입니다. 우리에겐 이를 JavaScript로 변환해주는 간단한 프리컴파일러(precompiler)가 있습니다. diff --git a/docs/tips/17-children-undefined-ko-KR.md b/docs/tips/17-children-undefined.ko-KR.md similarity index 87% rename from docs/tips/17-children-undefined-ko-KR.md rename to docs/tips/17-children-undefined.ko-KR.md index 21552e9bfc..532125ee0f 100644 --- a/docs/tips/17-children-undefined-ko-KR.md +++ b/docs/tips/17-children-undefined.ko-KR.md @@ -25,4 +25,4 @@ var App = React.createClass({ React.render(, mountNode); ``` -괜찮은 예제들을 더 알아보려면, [프론트 페이지](/)의 마지막 예제를 참고하세요. +서브 컴포넌트(`span`)에 억세스하려면, [refs](/react/docs/more-about-refs.html)를 넣으세요. diff --git a/docs/tips/19-dangerously-set-inner-html.ko-KR.md b/docs/tips/19-dangerously-set-inner-html.ko-KR.md index 7ef8397520..a5c9200057 100644 --- a/docs/tips/19-dangerously-set-inner-html.ko-KR.md +++ b/docs/tips/19-dangerously-set-inner-html.ko-KR.md @@ -21,4 +21,4 @@ function createMarkup() { return {__html: 'First · Second'}; }; 이 기능성은 주로 DOM 문자열을 다루는 라이브러리와 협동하기 위한 목적으로 제공하며, 포함할 HTML은 잘 정제되어야 합니다. (예: XML 검증을 통과) -더 완벽한 사용 예제를 보려면 [대문](/)의 최신 예제를 참조하세요. +더 완벽한 사용 예제를 보려면 [대문](/react/)의 최신 예제를 참조하세요.