Merge pull request #3734 from marocchino/update-korean
Update Translation to 0183f70
This commit is contained in:
commit
4dbccea975
|
@ -31,7 +31,7 @@ UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하
|
|||
</html>
|
||||
```
|
||||
|
||||
문서의 나머지에서, 코드가 위와 같은 HTML 템플릿에 들어갔다고 가정하고 JavaScript 코드에만 집중할 것입니다. 위의 주석 부분을 다음과 같은 JavaScript 코드로 바꿔 보세요:
|
||||
문서의 나머지에서, 코드가 위와 같은 HTML 템플릿에 들어갔다고 가정하고 JavaScript 코드에만 집중할 것입니다. 위의 주석 부분을 다음과 같은 JSX 코드로 바꿔 보세요:
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
|
|
|
@ -11,13 +11,13 @@ React에서는 컴포넌트를 감싸서 추상화하는 것이 일반적인 패
|
|||
[JSX 스프레드 어트리뷰트](/react/docs/jsx-spread-ko-KR.html)를 통해 props에 추가적인 값을 병합할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
return <Component {...this.props} more="values" />;
|
||||
<Component {...this.props} more="values" />
|
||||
```
|
||||
|
||||
만약 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 구문을 사용합니다.
|
||||
|
|
|
@ -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 <div>{blueChildren}</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(
|
||||
<Blue>
|
||||
<p>This text is blue.</p>
|
||||
</Blue>,
|
||||
document.getElementById('container')
|
||||
);
|
||||
```
|
||||
|
||||
`cloneWithProps`는 `key`나 `ref`를 클론된 엘리먼트에 전달하지 않습니다. `className`, `style` prop은 자동으로 머지됩니다.
|
||||
|
|
|
@ -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))도 있습니다.
|
||||
|
||||
|
|
|
@ -88,6 +88,8 @@ React.render(
|
|||
);
|
||||
```
|
||||
|
||||
네이티브 HTML 엘리먼트 이름은 소문자로 시작하고 커스텀 React 클래스 이름은 대문자로 시작합니다.
|
||||
|
||||
#### JSX 문법
|
||||
|
||||
JavsScript 안의 유사 XML 구문이 먼저 눈에 띌 것입니다. 우리에겐 이를 JavaScript로 변환해주는 간단한 프리컴파일러(precompiler)가 있습니다.
|
||||
|
|
|
@ -25,4 +25,4 @@ var App = React.createClass({
|
|||
React.render(<App></App>, mountNode);
|
||||
```
|
||||
|
||||
괜찮은 예제들을 더 알아보려면, [프론트 페이지](/)의 마지막 예제를 참고하세요.
|
||||
서브 컴포넌트(`span`)에 억세스하려면, [refs](/react/docs/more-about-refs.html)를 넣으세요.
|
|
@ -21,4 +21,4 @@ function createMarkup() { return {__html: 'First · Second'}; };
|
|||
|
||||
이 기능성은 주로 DOM 문자열을 다루는 라이브러리와 협동하기 위한 목적으로 제공하며, 포함할 HTML은 잘 정제되어야 합니다. (예: XML 검증을 통과)
|
||||
|
||||
더 완벽한 사용 예제를 보려면 [대문](/)의 최신 예제를 참조하세요.
|
||||
더 완벽한 사용 예제를 보려면 [대문](/react/)의 최신 예제를 참조하세요.
|
||||
|
|
Loading…
Reference in New Issue