diff --git a/docs/02.1-jsx-in-depth.ko-KR.md b/docs/02.1-jsx-in-depth.ko-KR.md index 962e0837..cbd982a8 100644 --- a/docs/02.1-jsx-in-depth.ko-KR.md +++ b/docs/02.1-jsx-in-depth.ko-KR.md @@ -45,6 +45,7 @@ React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구 > 권장하지 않습니다. 대신, React DOM 컴포넌트는 각각 `className`, `htmlFor`같은 > DOM 프로퍼티 이름을 기대합니다. + ## 변환 React JSX는 XML같은 문법에서 네이티브 JavaScript로 변환됩니다. XML 엘리먼트, 어트리뷰트, 자식은 `React.createElement`에 넘겨지는 인자로 변환됩니다. @@ -73,6 +74,15 @@ var app = React.createElement( ); ``` +클래스에 [displayName](/react/docs/component-specs-ko-KR.html#displayName)이 정의되어 있지 않으면 JSX는 변수명을 displayName으로 간주할 것입니다: + +```javascript +// 입력 (JSX): +var Nav = React.createClass({ }); +// 출력 (JS): +var Nav = React.createClass({displayName: "Nav", }); +``` + [JSX 컴파일러](/react/jsx-compiler.html)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다. JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다. diff --git a/docs/04-multiple-components.ko-KR.md b/docs/04-multiple-components.ko-KR.md index 1012cd81..8e48777a 100644 --- a/docs/04-multiple-components.ko-KR.md +++ b/docs/04-multiple-components.ko-KR.md @@ -172,26 +172,7 @@ var MyComponent = React.createClass({ }); ``` -객체를 넘기는 것으로 자식에 키를 할당할 수도 있습니다. 객체 키는 각 값의 `key`로 사용될 것입니다. 하지만 JavaScript가 프로퍼티의 순서의 유지를 보장하지 않는 것을 기억해 두셔야 합니다. 실제 브라우저에서는 32비트의 양의 정수로 해석할 수 있는 프로퍼티를 **제외**하고 프로퍼티의 순서를 유지합니다. 숫자 프로퍼티는 다른 프로퍼티보다 먼저 순차정렬 됩니다. 이런 경우 React는 순서없이 컴포넌트를 렌더합니다. 키에 문자열 접두사를 붙여서 이를 막을 수 있습니다. - -```javascript - render: function() { - var items = {}; - - this.props.results.forEach(function(result) { - // result.id가 (짧은 해시처럼) 숫자로 보일 수 있다면, - // 객체의 반복순서는 보장되지 않습니다. 이 경우, 프리픽스를 넣어 - // 키가 문자열임을 보장합니다. - items['result-' + result.id] =
  • {result.text}
  • ; - }); - - return ( -
      - {items} -
    - ); - } -``` +ReactFragment 객체를 넘기는 것으로 자식에 키를 할당할 수도 있습니다. 자세한 내용은 [키가 할당된 프래그먼트](create-fragment-ko-KR.html)를 참고하세요. ## 데이터 흐름 diff --git a/docs/05-reusable-components.ko-KR.md b/docs/05-reusable-components.ko-KR.md index be97be02..50bcef7e 100644 --- a/docs/05-reusable-components.ko-KR.md +++ b/docs/05-reusable-components.ko-KR.md @@ -183,3 +183,49 @@ React.render( ``` 믹스인의 괜찮은 점은 컴포넌트가 여러 믹스인을 사용하고 여러 믹스인에서 같은 생명주기 메소드를 사용할 때(예를 들어, 여러 믹스인에서 컴포넌트가 사라질 때 뭔가 정리하려 한다면) 모든 생명주기 메소드들의 실행은 보장됩니다. 믹스인에 정의된 메소드은 컴포넌트의 메소드가 호출됨에 따라 믹스인이 나열된 순서대로 실행됩니다. + +## ES6 클래스 + +React 클래스를 일반적인 JavaScript 클래스로 선언할 수도 있습니다. 다음의 예제는 ES6 클래스 문법을 사용합니다: + +```javascript +class HelloMessage extends React.Component { + render() { + return
    Hello {this.props.name}
    ; + } +} +React.render(, mountNode); +``` + +API는 `getInitialState`를 제외하고 `React.createClass`와 유사합니다. 별도의 `getInitialState` 메소드 대신에, 필요한 `state` 프로퍼티를 생성자에서 설정할 수 있습니다. + +또다른 차이점은 `propTypes`와 `defaultProps`가 클래스의 내부가 아니라 생성자의 프로퍼티로 정의되어 있다는 것입니다. + +```javascript +export class Counter extends React.Component { + constructor(props) { + super(props); + this.state = {count: props.initialCount}; + } + tick() { + this.setState({count: this.state.count + 1}); + } + render() { + return ( +
    + Clicks: {this.state.count} +
    + ); + } +} +Counter.propTypes = { initialCount: React.PropTypes.number }; +Counter.defaultProps = { initialCount: 0 }; +``` + +### 자동 바인딩 안됨 + +메소드는 일반 ES6 클래스와 동일한 시맨틱을 따릅니다. `this`를 인스턴스에 자동으로 바인딩하지 않는다는 이야기입니다. 명시적으로 `.bind(this)`나 화살표 함수(arrow function)을 사용하세요. + +### 믹스인 안됨 + +불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다. diff --git a/docs/08.1-more-about-refs.ko-KR.md b/docs/08.1-more-about-refs.ko-KR.md index 8ac32839..d1abcb5a 100644 --- a/docs/08.1-more-about-refs.ko-KR.md +++ b/docs/08.1-more-about-refs.ko-KR.md @@ -65,9 +65,9 @@ render 메소드를 통해 UI 구조를 얻은 다음, 반환된 컴포넌트 자 그럼 어떻게 *진짜* input의 지원 인스턴스를 다룰까요? -## ref 어트리뷰트 +## ref 문자열 어트리뷰트 -React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특별한 프로퍼티를 지원합니다. 이 특별한 프로퍼티는 `render()`에서 반환된 모든 것들에 대해 각각에 대응하는 **지원 인스턴스**를 참조할 수 있습니다. 이는 항상 어떤 시점에서든 올바른 인스턴스를 보장합니다. +React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특별한 프로퍼티를 지원합니다. 이 특별한 프로퍼티는 `render()`에서 반환한 모든 것들에 대해 각각에 대응하는 **지원 인스턴스**를 참조할 수 있습니다. 이는 항상 어떤 시점에서든 올바른 인스턴스를 보장합니다. 간단합니다: @@ -86,6 +86,16 @@ React는 `render()`로 출력된 컴포넌트에 추가할 수 있는 아주 특 `React.findDOMNode(this.refs.myInput)`를 호출해 컴포넌트의 DOM 노드에 접근할 수 있습니다. +## ref 콜백 어트리뷰트 + +`ref` 어트리뷰트는 이름 대신 콜백 함수가 될 수도 있습니다. 이 콜백은 컴포넌트가 마운트 된 뒤 즉시 실행될 것입니다. 참조된 컴포넌트는 매개 변수로 전달되며 콜백은 이를 즉시 사용하거나, 앞으로 사용하기 위해 참조를 저장해 놓거나, 혹은 둘 다 할 것입니다. + +`render`에서 반환한 모든 것에 간단하게 `ref` 어트리뷰트를 할당할 수 있습니다: + + ```html + + ``` + ## 예제 완성하기 ```javascript diff --git a/docs/10-addons.ko-KR.md b/docs/10-addons.ko-KR.md index 625e602e..d262cfeb 100644 --- a/docs/10-addons.ko-KR.md +++ b/docs/10-addons.ko-KR.md @@ -10,10 +10,11 @@ next: animation-ko-KR.html - [`TransitionGroup` 과 `CSSTransitionGroup`](animation-ko-KR.html)은 예를 들면 컴포넌트 삭제 직전의 트랜지션 처럼, 구현하기 까다로운 애니메이션과 트랜지션을 다룹니다. - [`LinkedStateMixin`](two-way-binding-helpers-ko-KR.html)는 사용자 입력과 컴포넌트의 state사이의 조정(coordination)을 단순화 합니다. -- [`classSet`](class-name-manipulation-ko-KR.html)는 좀 더 알기 쉽게 DOM `class` 문자열을 다룹니다. - [`cloneWithProps`](clone-with-props-ko-KR.html)는 React 컴포넌트를 얕은 복사를 하고 props를 변경합니다. +- [`createFragment`](create-fragment-ko-KR.html)는 외부에서 키가 할당된 자식들의 모음을 만듭니다. - [`update`](update-ko-KR.html)는 JavaScript안에서 불변 데이터를 다루기 쉽게하는 헬퍼 함수입니다. - [`PureRenderMixin`](pure-render-mixin-ko-KR.html)는 특정 상황에서 성능을 향상시켜 줍니다. +- (비 추천) [`classSet`](class-name-manipulation-ko-KR.html)는 좀 더 알기 쉽게 DOM `class` 문자열을 다룹니다. 밑에 있는 애드온은 React 개발 (압축되지 않은) 버전에서만 사용가능 합니다. diff --git a/docs/10.4-test-utils.ko-KR.md b/docs/10.4-test-utils.ko-KR.md index 89024334..9f0257e5 100644 --- a/docs/10.4-test-utils.ko-KR.md +++ b/docs/10.4-test-utils.ko-KR.md @@ -137,3 +137,45 @@ ReactComponent findRenderedComponentWithType(ReactComponent tree, function compo ``` `scryRenderedComponentsWithType()`와 비슷하지만 하나의 결과만 기대될 때 사용합니다. 하나의 결과를 리턴하거나 한개 이상의 결과가 나온 경우에는 예외를 던집니다. + +## 얕은 렌더링 + +얕은 렌더링은 "한 단계 깊이의" 컴포넌트를 렌더할 수 있는 실험적인 기능입니다. 자식 컴포넌트가 인스턴스화 되거나 렌더되는 등의 동작에 대한 걱정 없이 렌더 메소드가 반환하는 것만 검증합니다. 이 기능은 DOM이 필요하지 않습니다. + +```javascript +ReactShallowRenderer createRenderer() +``` + +테스트에서 얕은 렌더러를 생성하고자 할때 호출합니다. 이를 이벤트와 업데이트에 스스로 반응하는 컴포넌트를 렌더하기 위한 "장소"라고 생각할 수 있습니다. + +```javascript +shallowRenderer.render(ReactElement element) +``` + +`React.render`와 유사합니다. + +```javascript +ReactComponent shallowRenderer.getRenderOutput() +``` + +렌더가 호출 된 후, 얕게 렌더된 결과물을 반환합니다. 그 후엔 결과물에 대한 검증을 시작할 수 있습니다. 예를 들어 컴포넌트의 렌더 메소드가 다음을 반환한다면: + +```javascript +
    + Title + +
    +``` + +그 후에는 검증할 수 있습니다: + +```javascript +result = renderer.getRenderOutput(); +expect(result.type).toBe('div'); +expect(result.props.children).toEqual([ + Title + +]); +``` + +현재 얕은 테스트는 refs를 지원하지 않는 등 몇가지 제약사항이 있습니다. 우리는 이 기능을 빠르게 먼저 배포하고 React 커뮤니티의 피드백을 받아 나아갈 방향을 찾고자 합니다. diff --git a/docs/10.5-clone-with-props.ko-KR.md b/docs/10.5-clone-with-props.ko-KR.md index 0423bbf2..ebf6e5d7 100644 --- a/docs/10.5-clone-with-props.ko-KR.md +++ b/docs/10.5-clone-with-props.ko-KR.md @@ -3,7 +3,7 @@ id: clone-with-props-ko-KR title: ReactElement 클론하기 permalink: clone-with-props-ko-KR.html prev: test-utils-ko-KR.html -next: update-ko-KR.html +next: create-fragment-ko-KR.html --- 드문 경우긴 하지만 엘리먼트에서 소유하지 않은 엘리먼트의 props를 변경하고 싶을 때가 있습니다. (`this.props.children`로 전달된 엘리먼트의 `className` 변경 같은 경우) 아니면 전달된 엘리먼트의 복사본을 여럿 만들고 싶을 수도 있습니다. 이는 `cloneWithProps()`로 할 수 있습니다. diff --git a/docs/10.6-create-fragment.ko-KR.md b/docs/10.6-create-fragment.ko-KR.md new file mode 100644 index 00000000..8486abdd --- /dev/null +++ b/docs/10.6-create-fragment.ko-KR.md @@ -0,0 +1,73 @@ +--- +id: create-fragment-ko-KR +title: 키가 할당된 프래그먼트 +permalink: create-fragment-ko-KR.html +prev: clone-with-props-ko-KR.html +next: update-ko-KR.html +--- + +대부분의 경우는 `key` prop으로 `render`에서 반환된 엘리먼트에 키를 명시할 수 있습니다. 하지만 말썽을 부리는 경우가 한가지 있습니다: 재정렬을 할 두개의 자식 집합을 가지고 있는 경우, 감싸는 엘리먼트 없이 각각의 집합에 키를 부여하는 것은 불가능 합니다. + +이 말은, 만약 다음과 같은 컴포넌트가 있다면: + +```js +var Swapper = React.createClass({ + propTypes: { + // `leftChildren`과 `rightChildren`은 문자열, 엘리먼트, 배열 혹은 다른 무언가 일 수 있음. + leftChildren: React.PropTypes.node, + rightChildren: React.PropTypes.node, + + swapped: React.PropTypes.bool + } + render: function() { + var children; + if (this.props.swapped) { + children = [this.props.rightChildren, this.props.leftChildren]; + } else { + children = [this.props.leftChildren, this.props.rightChildren]; + } + return
    {children}
    ; + } +}); +``` + +`swapped` prop을 변경할 경우 자식은 마운트 해제되거나 다시 마운트 될 수 있습니다. 두 자식 집합에 키가 할당되지 않았기 때문입니다. + +이 문제를 해결하기 위해서 `React.addons.createFragment`를 사용해 자식 집합에 키를 부여할 수 있습니다. + +#### `ReactFragment React.addons.createFragment(object children)` + +배열을 만드는 대신에 다음과 같이 해볼 수 있습니다: + +```js +if (this.props.swapped) { + children = React.addons.createFragment({ + right: this.props.rightChildren, + left: this.props.leftChildren + }); +} else { + children = React.addons.createFragment({ + left: this.props.leftChildren, + right: this.props.rightChildren + }); +} +``` + +전달된 객체의 키(`left`, `right`)는 모든 자식 집합의 키로 사용됩니다. 그리고 객체에서 키들의 순서는 렌더된 자식들의 순서를 결정하는데 사용됩니다. 이러한 변경으로 두 자식 집합은 언마운팅하지 않고도 DOM에서 적절하게 재정렬 됩니다. + +`createFragment`의 반환값은 불명확한 객체로 취급되어야 합니다; `React.Children` 헬퍼를 사용해 프래그먼트를 순환할 수 있지만 직접 접근해서는 안됩니다. 명세에는 없지만 모든 주요 브라우저와 VM들에서 JavaScript 엔진이 숫자가 아닌 키에 대해서도 객체 목록 순서를 보존한다는 점을 주의하세요. + +> **주의:** +> +> 미래에 `createFragment`는 대략 다음과 같은 API로 교체될 것입니다 +> +> ```js +> return ( +>
    +> {this.props.rightChildren}, +> {this.props.leftChildren} +>
    +> ); +> ``` +> +> JSX에서 엘리먼트로 감싸지 않고도 key를 바로 선언할 수 있게 될 것입니다. diff --git a/docs/10.6-update.ko-KR.md b/docs/10.7-update.ko-KR.md similarity index 99% rename from docs/10.6-update.ko-KR.md rename to docs/10.7-update.ko-KR.md index b2b5d6bf..4e7eed51 100644 --- a/docs/10.6-update.ko-KR.md +++ b/docs/10.7-update.ko-KR.md @@ -2,7 +2,7 @@ id: update-ko-KR title: 불변성 헬퍼들 permalink: update-ko-KR.html -prev: clone-with-props-ko-KR.html +prev: create-fragment-ko-KR.html next: pure-render-mixin-ko-KR.html --- diff --git a/docs/10.7-pure-render-mixin.ko-KR.md b/docs/10.8-pure-render-mixin.ko-KR.md similarity index 100% rename from docs/10.7-pure-render-mixin.ko-KR.md rename to docs/10.8-pure-render-mixin.ko-KR.md diff --git a/docs/10.8-perf.ko-KR.md b/docs/10.9-perf.ko-KR.md similarity index 100% rename from docs/10.8-perf.ko-KR.md rename to docs/10.9-perf.ko-KR.md diff --git a/docs/ref-01-top-level-api.ko-KR.md b/docs/ref-01-top-level-api.ko-KR.md index 693e9f96..9205b245 100644 --- a/docs/ref-01-top-level-api.ko-KR.md +++ b/docs/ref-01-top-level-api.ko-KR.md @@ -11,6 +11,15 @@ redirect_from: "/docs/reference-ko-KR.html" `React`는 React 라이브러리의 진입점입니다. 미리 빌드된 패키지를 사용하는 경우 전역 변수로 접근할 수 있습니다. CommonJS 모듈을 사용하는 경우에는 `require()`로 불러올 수 있습니다. +### React.Component + +```javascript +class Component +``` + +ES6 클래스 구문을 사용해 React 컴포넌트를 정의했을 때 기본 클래스가 되는 부분입니다. 어떻게 ES6 클래스 구문을 사용해 React를 다루는지는 [재사용가능한 컴포넌트](/react/docs/reusable-components-ko-KR.html#es6-classes)를 확인하세요. 기본 클래스에서 실제 제공되는 메소드들에는 어떤것이 있는지 알아보려면 [컴포넌트 API](/react/docs/component-api-ko-KR.html)를 확인하세요. + + ### React.createClass ```javascript @@ -35,6 +44,19 @@ ReactElement createElement( 주어진 타입의 새 `ReactElement`를 만들고 리턴합니다. `type` 인자는 HTML 태그명 문자열 (예: 'div', 'span' 등) 또는 (`React.createClass`로 만든) `ReactClass`입니다. +### React.cloneElement + +``` +ReactElement cloneElement( + ReactElement element, + [object props], + [children ...] +) +``` + +`element`를 시작점으로 새로운 `ReactElement`를 클론해 반환합니다. 반환된 엘리먼트에는 원본의 props와 새로운 props가 얕게 병합됩니다. 새 자식은 존재하는 자식을 교체할 것입니다. `React.addons.cloneWithProps`와는 다르게, 원본 엘리먼트의 `key`와 `ref`는 보존될 것입니다. `cloneWithProps`와는 달리 props이 병합되는데는 어떠한 특별한 동작도 없습니다. [v0.13 RC2 블로그 포스트](/react/blog/2015/03/03/react-v0.13-rc2.html)에서 추가적인 내용을 확인하세요. + + ### React.createFactory ```javascript diff --git a/docs/ref-02-component-api.ko-KR.md b/docs/ref-02-component-api.ko-KR.md index 231c0cb8..c7144cf9 100644 --- a/docs/ref-02-component-api.ko-KR.md +++ b/docs/ref-02-component-api.ko-KR.md @@ -6,7 +6,7 @@ prev: top-level-api-ko-KR.html next: component-specs-ko-KR.html --- -## ReactComponent +## React.Component React 컴포넌트의 인스턴스는 React가 렌더링 시에 내부적으로 만듭니다. 이때 만들어진 인스턴스는 이후의 렌더링에서 다시 사용되고 컴포넌트의 메소드들에서 `this` 변수로 접근할 수 있습니다. React 외부에서 React 컴포넌트의 핸들을 얻는 방법은 `React.render`의 리턴값을 저장하는 것이 유일합니다. 다른 컴포넌트 안에서 비슷한 결과를 얻으려면 [refs](/react/docs/more-about-refs-ko-KR.html)를 사용해야 합니다. @@ -14,10 +14,28 @@ React 컴포넌트의 인스턴스는 React가 렌더링 시에 내부적으로 ### setState ```javascript -setState(object nextState[, function callback]) +setState(function|object nextState[, function callback]) ``` -`nextState`를 현재 state에 합칩니다. 이벤트 핸들러와 서버 요청 콜백에서 UI 업데이트를 발생시키기 위해 이 메소드를 주로 사용합니다. 콜백 함수를 추가로 넘기면 `setState`가 완료되고 컴포넌트가 다시 렌더링된 다음에 한번 호출됩니다. +`nextState`를 현재 state에 합칩니다. 이벤트 핸들러와 서버 요청 콜백에서 UI 업데이트를 발생시키기 위해 이 메소드를 주로 사용합니다. + +첫번째 인자는 업데이트를 위한 키를 0개 이상 가진 객체이거나 업데이트를 위한 키들을 포함한 객체를 반환하는 함수(의 state나 props)일 수 있습니다. + +객체를 사용하는 간단한 예제입니다... + +```javascript +setState({mykey: '새로운 값'}); +``` + +`function(state, props)`처럼 인자를 포함한 함수를 넘겨주는 것도 가능합니다. 어떤 값이든 state와 props의 이전 값을 참고해서 원자적인 업데이트를 큐에 추가(enqueue)하려는 경우 이는 유용합니다. 예를 들어 state의 값을 증가 시키려는 경우 같이 처리 가능합니다: + +```javascript +setState(function(previousState, currentProps) { + return {myInteger: previousState.myInteger + 1}; +});` +``` + +두번째 인자는 선택적이며, `setState`가 한번 완료되고 컴포넌트가 다시 렌더 되었을때 실행되는 콜백 함수입니다. > 주의: > @@ -38,6 +56,10 @@ replaceState(object nextState[, function callback]) `setState()`와 비슷하지만 기존에 존재하는 state 중 nextState에 없는 키는 모두 삭제됩니다. +> 주의: +> +> 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다. + ### forceUpdate @@ -63,6 +85,8 @@ DOMElement getDOMNode() > 주의: > > getDOMNode는 비 추천 상태가 되었고 [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode)로 교체되었습니다. +> +> 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다. ### isMounted @@ -73,6 +97,10 @@ bool isMounted() `isMounted()`는 컴포넌트가 DOM에 렌더링되었으면 true를, 아니면 false를 리턴합니다. 비동기적으로 `setState()`나 `forceUpdate()`를 호출할 때 이 메소드를 사용하여 오류를 방지할 수 있습니다. +> 주의: +> +> 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다. + ### setProps @@ -89,6 +117,8 @@ setProps(object nextProps[, function callback]) > 가능하다면 `React.render()`를 다시 호출하는 선언적인 방법이 더 바람직합니다. 그렇게 하는 편이 업데이트에 대해 생각하는 것을 쉽게 만듭니다. (두가지 방식에 눈에 띄는 성능 차이는 없습니다.) > > 이 메소드는 최상위 컴포넌트에만 호출 가능합니다. 다시 말해, `React.render()`에 바로 넘긴 컴포넌트에서만 사용할 수 있고 자식에서는 불가능합니다. 자식 컴포넌트에 `setProps()`를 사용하고 싶다면, 그 대신 반응적인 업데이트의 장점을 활용하여 `render()` 안에서 자식 컴포넌트를 만들 때 새로운 prop을 넘기세요. +> +> 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다. ### replaceProps @@ -98,3 +128,7 @@ replaceProps(object nextProps[, function callback]) ``` `setProps()`와 비슷하지만 두 객체를 합치는 대신 이전에 존재하던 props를 삭제합니다. + +> 주의: +> +> 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다. diff --git a/docs/ref-03-component-specs.ko-KR.md b/docs/ref-03-component-specs.ko-KR.md index 3efd367a..7dcdb380 100644 --- a/docs/ref-03-component-specs.ko-KR.md +++ b/docs/ref-03-component-specs.ko-KR.md @@ -95,7 +95,7 @@ MyComponent.customMethod('bar'); // true string displayName ``` -`displayName` 문자열은 디버그 메시지에 사용됩니다. JSX는 이 값을 자동으로 설정합니다. [JSX 깊이 알기](/react/docs/jsx-in-depth-ko-KR.html#react-composite-components)를 참고하세요. +`displayName` 문자열은 디버그 메시지에 사용됩니다. JSX는 이 값을 자동으로 설정합니다. [JSX 깊이 알기](/react/docs/jsx-in-depth-ko-KR.html#the-transform)를 참고하세요. ## 생명주기 메소드 diff --git a/docs/ref-05-events.ko-KR.md b/docs/ref-05-events.ko-KR.md index de02774f..1a744a4e 100644 --- a/docs/ref-05-events.ko-KR.md +++ b/docs/ref-05-events.ko-KR.md @@ -112,8 +112,7 @@ onChange 이벤트에 대한 더 자세한 정보는 [폼](/react/docs/forms-ko- 이벤트 이름: ``` -onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave -onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave +onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ```