mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
Revise Korean translation - final
This commit is contained in:
Jay Jaeho Lee
@@ -224,8 +224,8 @@ Counter.defaultProps = { initialCount: 0 };
|
||||
|
||||
### 자동 바인딩 안됨
|
||||
|
||||
메소드는 일반 ES6 클래스와 동일한 시맨틱을 따릅니다. `this`를 인스턴스에 자동으로 바인딩하지 않는다는 이야기입니다. 명시적으로 `.bind(this)`나 화살표 함수(arrow function)을 사용하세요.
|
||||
메소드는 일반 ES6 클래스와 동일한 시멘틱을 따릅니다. `this`를 인스턴스에 자동으로 바인딩하지 않는다는 이야기입니다. 명시적으로 `.bind(this)`나 화살표 함수(arrow function)을 사용하세요.
|
||||
|
||||
### 믹스인 안됨
|
||||
|
||||
불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다.
|
||||
불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다.
|
||||
|
||||
@@ -5,7 +5,7 @@ permalink: more-about-refs-ko-KR.html
|
||||
prev: working-with-the-browser-ko-KR.html
|
||||
next: tooling-integration-ko-KR.html
|
||||
---
|
||||
render 메소드를 통해 UI 구조를 얻은 다음, 반환된 컴포넌트 인스턴스에 접근하거나 메소드를 호출할 방법이 필요할 수도 있습니다. 반응 적 데이터 플로우가 `render()`의 결과물에서 최신의 `props`가 각각의 자식으로 보내진 것을 항상 보장하기 때문에 어플리케이션의 데이터 플로우를 만드는데 대체로 이런 작업은 필요가 없지만, 여전히 이런 작업이 필요하거나 유리한 경우가 있긴 합니다.
|
||||
render 메소드를 통해 UI 구조를 얻은 다음, 반환된 컴포넌트 인스턴스에 접근하거나 메소드를 호출할 방법이 필요할 수도 있습니다. 반응적 데이터 플로우가 `render()`의 결과물에서 최신의 `props`가 각각의 자식으로 보내진 것을 항상 보장하기 때문에 애플리케이션의 데이터 플로우를 만드는데 대체로 이런 작업은 필요가 없지만, 여전히 이런 작업이 필요하거나 유리한 경우가 있긴 합니다.
|
||||
|
||||
인스턴스의 하위 계층구조에 존재하는 `<input />` 엘리먼트의 value를 빈 문자열(`''`)로 업데이트한 후 포커스 하는 경우를 생각해 봅시다.
|
||||
|
||||
@@ -38,7 +38,7 @@ render 메소드를 통해 UI 구조를 얻은 다음, 반환된 컴포넌트
|
||||
```
|
||||
|
||||
|
||||
한번 살펴보죠. 이 예제에서 우리는 시간이 지남에 따라 props에서 추론할 수 없는 무언가를 입력하도록 "알려주길" 원했습니다. 이 사례에서 우리는 이제 포커스 되도록 "알려주길" 원합니다. 그러나 몇 가지 문제가 있습니다. `render()`에서 반환된 것은 "자식" 컴포넌트의 실제 구성이 아니고, 단지 특정 시점의 인스턴스의 자식에 대한 *서술*일 뿐입니다. - 말하자면 스냅 샷인 것이지요.
|
||||
한번 살펴보죠. 이 예제에서 우리는 시간이 지남에 따라 props에서 추론할 수 없는 무언가를 입력하도록 "알려주길" 원했습니다. 이 사례에서 우리는 이제 포커스 되도록 "알려주길" 원합니다. 그러나 몇 가지 문제가 있습니다. `render()`에서 반환된 것은 "자식" 컴포넌트의 실제 구성이 아니고, 단지 특정 시점의 인스턴스의 자식에 대한 *서술*일 뿐입니다. - 말하자면 스냅샷인 것이지요.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
@@ -141,7 +141,7 @@ Refs는 반응적인 `props`와 `state` 스트리밍을 통해서는 불편했
|
||||
|
||||
- 컴포넌트 클래스에 public 메소드(ex. Typeahead의 reset)를 선언할 수 있으며 refs를 통해 그를 호출할 수 있습니다. (ex. `this.refs.myTypeahead.reset()`)
|
||||
- DOM을 측정하기 위해서는 거의 항상 `<input />` 같은 "기본" 컴포넌트를 다루고 `React.findDOMNode(this.refs.myInput)`를 통해 그 기저의 DOM 노드에 접근해야 합니다. Refs는 이 일을 확실하게 수행하는 몇 안 되는 실용적인 방법의 하나입니다.
|
||||
- Refs는 자동으로 기록을 관리합니다! 자식이 파괴되면, 그의 ref도 마찬가지로 파괴됩니다. 참조를 유지하기 위해 뭔가 미친 짓을 하지 않는 한, 메모리 걱정은 하지 않아도 됩니다.
|
||||
- Refs는 자동으로 기록을 관리합니다! 자식이 파괴되면, 그의 ref도 마찬가지로 파괴됩니다. 참조를 유지하기 위해 뭔가 미친 짓을 하지 않는 한, 메모리 걱정은 하지 않아도 됩니다.
|
||||
|
||||
### 주의:
|
||||
|
||||
|
||||
@@ -72,7 +72,7 @@ var TodoList = React.createClass({
|
||||
}
|
||||
```
|
||||
|
||||
`ReactCSSTransitionGroup`에서 아이템을 제거하려해도 DOM에는 남게 됩니다. 만약 애드온을 React의 최소화하지 않은 빌드와 사용한다면, 애니메이션이나 트랜지션이 일어나는 것을 예상하고 있었다는 React의 경고를 보게 될 것입니다. 그게 바로 `ReactCSSTransitionGroup`가 DOM 엘리먼트를 애니메이션이 끝날때 까지 페이지에 남겨두는 이유입니다. 이 CSS를 넣어보세요.
|
||||
`ReactCSSTransitionGroup`에서 아이템을 제거하려해도 DOM에는 남게 됩니다. 만약 애드온을 React의 최소화하지 않은 빌드와 사용한다면, 애니메이션이나 트랜지션이 일어나는 것을 예상하고 있었다는 React의 경고를 보게 될 것입니다. 그게 바로 `ReactCSSTransitionGroup`가 DOM 엘리먼트를 애니메이션이 끝날 때까지 페이지에 남겨두는 이유입니다. 이 CSS를 넣어보세요.
|
||||
|
||||
```css
|
||||
.example-leave {
|
||||
@@ -87,7 +87,7 @@ var TodoList = React.createClass({
|
||||
|
||||
### 애니메이션 그룹이 작동하려면 마운트가 필요
|
||||
|
||||
자식들에게 트랜지션을 적용하려면 `ReactCSSTransitionGroup`은 이미 DOM에 마운트되어 있어야 합니다. 예를 들어, 밑의 코드는 동작하지 않을 것입니다. 왜냐하면 `ReactCSSTransitionGroup` 안에서 새 아이템을 마운트하는 대신 새 아이템과 같이 `ReactCSSTransitionGroup`를 마운트 했기 때문입니다. 이 것을 위에있는 [시작하기](#getting-stared) 항목과 비교해보세요.
|
||||
자식들에게 트랜지션을 적용하려면 `ReactCSSTransitionGroup`은 이미 DOM에 마운트되어 있어야 합니다. 예를 들어, 밑의 코드는 동작하지 않을 것입니다. 왜냐하면 `ReactCSSTransitionGroup` 안에서 새 아이템을 마운트하는 대신 새 아이템과 같이 `ReactCSSTransitionGroup`를 마운트했기 때문입니다. 이 것을 위에 있는 [시작하기](#getting-stared) 항목과 비교해보세요.
|
||||
|
||||
```javascript{12-15}
|
||||
render: function() {
|
||||
@@ -134,7 +134,7 @@ var ImageCarousel = React.createClass({
|
||||
|
||||
### 애니메이션 비활성화
|
||||
|
||||
원한다면 `enter`나 `leave` 애니메이션을 비활성화 할 수 있습니다. 예를 들어, `enter` 애니메이션만 필요하고 `leave` 애니메이션은 필요없지만, `ReactCSSTransitionGroup`이 DOM 노드를 없애기 전 애니메이션이 완료되길 기다리고 있는 경우에 사용할 수 있습니다. `ReactCSSTransitionGroup`에 `transitionEnter={false}`나 `transitionLeave={false}` props를 추가하면 그 애니메이션을 비활성화 할 수 있습니다.
|
||||
원한다면 `enter`나 `leave` 애니메이션을 비활성화 할 수 있습니다. 예를 들어, `enter` 애니메이션만 필요하고 `leave` 애니메이션은 필요없지만, `ReactCSSTransitionGroup`이 DOM 노드를 없애기 전 애니메이션이 완료되길 기다리고 있는 경우에 사용할 수 있습니다. `ReactCSSTransitionGroup`에 `transitionEnter={false}`나 `transitionLeave={false}` props를 추가하면 그 애니메이션을 비활성화 할 수 있습니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
@@ -162,7 +162,7 @@ var ImageCarousel = React.createClass({
|
||||
|
||||
### 다른 컴포넌트 렌더하기
|
||||
|
||||
기본적으로 `ReactTransitionGroup`은 `span`으로 렌더합니다. `component` prop으로 이 행동을 바꿀 수 있습니다. 예를 들어, `<ul>`을 렌더하고 싶다면 이렇게 하면됩니다.
|
||||
기본적으로 `ReactTransitionGroup`은 `span`으로 렌더합니다. `component` prop으로 이 행동을 바꿀 수 있습니다. 예를 들어, `<ul>`을 렌더하고 싶다면 이렇게 하면 됩니다.
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul">
|
||||
@@ -176,7 +176,7 @@ var ImageCarousel = React.createClass({
|
||||
>
|
||||
> v0.12이전에는, DOM 컴포넌트를 사용할 때, `component` prop은 `React.DOM.*`로 참조할 필요가 있었습니다. 이제 컴포넌트가 단순히 `React.createElement`로 전달되기 때문에, `component` prop은 스트링이어야 합니다. 복합 컴포넌트는 팩토리를 넘겨야 합니다.
|
||||
|
||||
사용자 정의를 포함한 어떤 프로퍼티도 렌더된 컴포넌트의 프로퍼티가 됩니다. 예를 들어, `<ul>`에 css 클래스를 넣어서 렌더하려면 이렇게 하면됩니다.
|
||||
사용자 정의를 포함한 어떤 프로퍼티도 렌더된 컴포넌트의 프로퍼티가 됩니다. 예를 들어, `<ul>`에 CSS 클래스를 넣어서 렌더하려면 이렇게 하면 됩니다.
|
||||
|
||||
```javascript{1}
|
||||
<ReactTransitionGroup component="ul" className="animated-list">
|
||||
|
||||
@@ -18,7 +18,7 @@ React에서 데이터 흐름은 소유주에서 자식으로의 단방향입니
|
||||
|
||||
React에서 이는 "change" 이벤트를 감시하고 데이터 소스(보통 DOM)에서 읽어 컴포넌트에서 `setState()`를 호출하는 식으로 할 수 있습니다. "데이터 흐름 반복을 제한"하면 더 이해하기 편하고, 쉽게 유지보수할 수 있는 프로그램이 만들어지는 것은 명확합니다. 더 자세한 내용은 [폼 문서](/react/docs/forms-ko-KR.html)를 확인하세요.
|
||||
|
||||
양방향 바인딩(묵시적으로 DOM의 어떤 값은 React `state`와 일치하도록 강제하는 것)은 간결하기도 하고 다양한 애플리케이션을 지원 할 수 있습니다. React는 `ReactLink`를 제공합니다. 이는 위에서 설명한 일반적인 데이터 흐름 반복 패턴을 설정하거나, 어떤 데이터 소스를 React `state`로 "링크하는" 편의 문법입니다.
|
||||
양방향 바인딩(묵시적으로 DOM의 어떤 값은 React `state`와 일치하도록 강제하는 것)은 간결하기도 하고 다양한 애플리케이션을 지원 할 수 있습니다. React는 `ReactLink`를 제공합니다. 이는 위에서 설명한 일반적인 데이터 흐름 반복 패턴을 설정하거나, 어떤 데이터 소스를 React `state`로 "링크하는" 편의 문법입니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
@@ -31,7 +31,7 @@ React에서 이는 "change" 이벤트를 감시하고 데이터 소스(보통 DO
|
||||
```javascript
|
||||
var NoLink = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {message: 'Hello!'};
|
||||
return {message: '안녕!'};
|
||||
},
|
||||
handleChange: function(event) {
|
||||
this.setState({message: event.target.value});
|
||||
@@ -69,7 +69,7 @@ checkbox의 `value` 어트리뷰트는 다른 것과 다르게 checkbox가 체
|
||||
|
||||
## 내부 구조
|
||||
|
||||
`ReactLink`에는 크게 인스턴스를 생성하는 면과 사용하는 면이 있습니다. `ReactLink`가 얼마나 간단한지 확인하기위해, 이 부분들을 보다 명시적으로 고쳐 봅시다.
|
||||
`ReactLink`에는 크게 인스턴스를 생성하는 면과 사용하는 면이 있습니다. `ReactLink`가 얼마나 간단한지 확인하기 위해, 이 부분들을 보다 명시적으로 고쳐 봅시다.
|
||||
|
||||
### LinkedStateMixin 없이 ReactLink 쓰기
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ next: test-utils-ko-KR.html
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> 이 모듈은 이제 [JedWatson/classnames](https://github.com/JedWatson/classnames)에 독립적으로 있고 React와 관련없습니다. 그러므로 이 에드온은 제거될 예정입니다.
|
||||
> 이 모듈은 이제 [JedWatson/classnames](https://github.com/JedWatson/classnames)에 독립적으로 있고 React와 관련없습니다. 그러므로 이 애드온은 제거될 예정입니다.
|
||||
|
||||
`classSet()`은 간단히 DOM `class` 문자열을 조작하는 편리한 도구입니다.
|
||||
|
||||
@@ -25,11 +25,11 @@ render: function() {
|
||||
classString += ' message-read';
|
||||
}
|
||||
// 'message message-important message-read'
|
||||
return <div className={classString}>Great, I'll be there.</div>;
|
||||
return <div className={classString}>좋아요, 거기서 봅시다.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
이것은 순식간에 장황해질 수 있습니다. 클래스 이름 문자열은 읽기 어렵고 에러가 발생하기 쉽기도 하죠. `classSet()`가 이 문제를 해결할 수 있습니다.
|
||||
이것은 순식간에 장황해질 수 있습니다. 클래스 이름 문자열은 읽기 어렵고 에러가 발생하기도 쉽죠. `classSet()`가 이 문제를 해결할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
@@ -40,11 +40,11 @@ render: function() {
|
||||
'message-read': this.props.isRead
|
||||
});
|
||||
// 최종 문자열은 동일하지만, 훨씬 깔끔함
|
||||
return <div className={classes}>Great, I'll be there.</div>;
|
||||
return <div className={classes}>좋아요, 거기서 봅시다.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
`classSet()`을 사용할 때 사용할지 안할지 잘모르는 CSS 클래스 이름 키와 함께 객체를 전달합니다. true로 간주되는(Truthy) 값은 키를 결과 문자열의 일부로 만듭니다.
|
||||
`classSet()`을 사용할 때 사용할지 안할지 잘 모르는 CSS 클래스 이름 키와 함께 객체를 전달합니다. true로 간주되는(Truthy) 값은 키를 결과 문자열의 일부로 만듭니다.
|
||||
|
||||
`classSet()`은 클래스 이름을 인자로 넘겨 연결되게 할 수도 있습니다.
|
||||
|
||||
@@ -55,7 +55,7 @@ render: function() {
|
||||
var readModifier = 'message-read';
|
||||
var classes = cx('message', importantModifier, readModifier);
|
||||
// 최종 문자열은 'message message-important message-read'
|
||||
return <div className={classes}>Great, I'll be there.</div>;
|
||||
return <div className={classes}>좋아요, 거기서 봅시다.</div>;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@ boolean isCompositeComponent(ReactComponent instance)`
|
||||
boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
|
||||
```
|
||||
|
||||
`instance`가 (`React.createClass()`로 생성된) 복합 컴포넌트고 React `componentClass` 타입이면 true를 리턴합니다.
|
||||
`instance`가 (`React.createClass()`로 생성된) 복합 컴포넌트고 React `componentClass` 타입이면 true를 리턴합니다.
|
||||
|
||||
### findAllInRenderedTree
|
||||
|
||||
@@ -178,4 +178,4 @@ expect(result.props.children).toEqual([
|
||||
]);
|
||||
```
|
||||
|
||||
현재 얕은 테스트는 refs를 지원하지 않는 등 몇가지 제약사항이 있습니다. 우리는 이 기능을 빠르게 먼저 배포하고 React 커뮤니티의 피드백을 받아 나아갈 방향을 찾고자 합니다.
|
||||
현재 얕은 테스트는 refs를 지원하지 않는 등 몇가지 제약사항이 있습니다. 우리는 이 기능을 빠르게 먼저 배포하고 React 커뮤니티의 피드백을 받아 나아갈 방향을 찾고자 합니다.
|
||||
|
||||
@@ -6,15 +6,15 @@ prev: test-utils-ko-KR.html
|
||||
next: create-fragment-ko-KR.html
|
||||
---
|
||||
|
||||
드문 경우긴 하지만 엘리먼트에서 소유하지 않은 엘리먼트의 props를 변경하고 싶을 때가 있습니다. (`this.props.children`로 전달된 엘리먼트의 `className` 변경 같은 경우) 아니면 전달된 엘리먼트의 복사본을 여럿 만들고 싶을 수도 있습니다. 이는 `cloneWithProps()`로 할 수 있습니다.
|
||||
드문 경우긴 하지만 엘리먼트에서 소유하지 않은 엘리먼트의 props를 변경하고 싶을 때가 있습니다 (`this.props.children`로 전달된 엘리먼트의 `className` 변경 같은 경우). 아니면 전달된 엘리먼트의 복사본 여러 개를 만들고 싶을 수도 있습니다. 이는 `cloneWithProps()`로 할 수 있습니다.
|
||||
|
||||
#### `ReactElement React.addons.cloneWithProps(ReactElement element, object? extraProps)`
|
||||
|
||||
`element`를 얕은 복사하고 `extraProps`로 넘긴 props를 머지합니다. `className`과 `style` props는 지능적으로 머지됩니다.
|
||||
`element`를 얕게 복사하고 `extraProps`로 넘긴 props를 머지합니다. `className`과 `style` props는 지능적인 방법으로 머지됩니다.
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> `cloneWithProps`는 `key`를 클론된 엘리먼트에 전송하지 않습니다. 키를 보존하고 싶으시면, `extraProps` 객체에 넣으세요.
|
||||
> `cloneWithProps`는 `key`를 클론된 엘리먼트에 전달하지 않습니다. 키를 보존하고 싶으시면, `extraProps` 객체에 넣으세요.
|
||||
>
|
||||
> ```js
|
||||
> var clonedElement = cloneWithProps(originalElement, { key : originalElement.key });
|
||||
|
||||
@@ -19,9 +19,9 @@ shouldComponentUpdate: function(nextProps, nextState) {
|
||||
}
|
||||
```
|
||||
|
||||
React가 이 함수를 자주 호출한다는 것을 명심하십시오. 따라서 구현체는 빨라야 합니다.
|
||||
React가 이 함수를 자주 호출한다는 것을 명심하십시오. 따라서 구현체는 빨라야 합니다.
|
||||
|
||||
대화 스레드가 여럿 돌고 있는 메시지처리 애플리케이션을 생각해 봅시다. 오직 하나의 스레드만이 변경되었다고 가정해 보죠. `ChatThread`에 `shouldComponentUpdate`를 구현했다면 React는 다른 스레드의 렌더링 프로세스를 건너뛸 수 있습니다.
|
||||
대화 스레드가 여럿 돌고 있는 메시지처리 애플리케이션을 생각해 봅시다. 오직 하나의 스레드만이 변경되었다고 가정해 보죠. `ChatThread`에 `shouldComponentUpdate`를 구현했다면 React는 다른 스레드의 렌더링 프로세스를 건너뛸 수 있습니다.
|
||||
|
||||
```javascript
|
||||
shouldComponentUpdate: function(nextProps, nextState) {
|
||||
@@ -29,7 +29,7 @@ shouldComponentUpdate: function(nextProps, nextState) {
|
||||
}
|
||||
```
|
||||
|
||||
정리하자면, React는 사용자가 `shouldComponentUpdate`를 사용해 렌더링 프로세스를 중단하고 가상의 DOM과 비교해 업데이트 여부를 결정해서 DOM의 하위 트리를 조정하는 비싼 DOM 조작을 피하도록 합니다.
|
||||
정리하자면, React는 사용자가 `shouldComponentUpdate`를 사용해 렌더링 프로세스를 중단하고 가상의 DOM과 비교해 업데이트 여부를 결정해서 DOM의 하위 트리를 조정하는 비싼 DOM 조작을 피하도록 합니다.
|
||||
|
||||
## shouldComponentUpdate 실전
|
||||
|
||||
@@ -41,7 +41,7 @@ shouldComponentUpdate: function(nextProps, nextState) {
|
||||
|
||||
C1과 C3의 `shouldComponentUpdate`가 `true`를 반환했기 때문에 React는 하위 노드로 내려가 그들을 확인합니다. C6는 `true`를 반환했네요; 이는 가상의 DOM과 같지 않기 때문에 DOM의 조정이 일어났습니다. 마지막으로 흥미로운 사례는 C8입니다. React가 이 노드를 위해 가상의 DOM을 작동했지만, 노드가 이전의 것과 일치했기 때문에 DOM의 조정을 일어나지 않았습니다.
|
||||
|
||||
React가 C6에만 DOM 변경을 수행한 것을 확인하세요. 이는 필연적이었습니다. C8의 경우는 가상의 DOM과 비교를 해 제외되었고, C2의 하위 트리와 C7은 `shouldComponentUpdate` 단계에서 제외되어 가상의 DOM은 구동조차 되지 않았습니다.
|
||||
React가 C6에만 DOM 변경을 수행한 것을 확인하세요. 이는 필연적이었습니다. C8의 경우는 가상의 DOM과 비교를 해 제외되었고, C2의 하위 트리와 C7은 `shouldComponentUpdate` 단계에서 제외되어 가상의 DOM은 구동조차 되지 않았습니다.
|
||||
|
||||
자 그럼, 어떻게 `shouldComponentUpdate`를 구현해야 할까요? 문자열 값을 렌더하는 컴포넌트를 생각해보죠.
|
||||
|
||||
@@ -123,11 +123,11 @@ React.createClass({
|
||||
});
|
||||
```
|
||||
|
||||
처음엔 내부 컴포넌트(`<InnerComponent />`)가 `{ foo: 'bar' }`를 value prop으로 가진 채 렌더될 것입니다. 사용자가 앵커(`<a>`)를 클릭한다면 부모 컴포넌트의 state는 `{ value: { foo: 'barbar' } }`로 업데이트되고, 내부 컴포넌트 또한 `{ foo: 'barbar' }`를 새로운 value prop으로 전달받아 다시 렌더링 되는 프로세스가 일어날 것입니다.
|
||||
처음엔 내부 컴포넌트(`<InnerComponent />`)가 `{ foo: 'bar' }`를 value prop으로 가진 채 렌더될 것입니다. 사용자가 앵커(`<a>`)를 클릭한다면 부모 컴포넌트의 state는 `{ value: { foo: 'barbar' } }`로 업데이트되고, 내부 컴포넌트 또한 `{ foo: 'barbar' }`를 새로운 value prop으로 전달받아 다시 렌더링 되는 프로세스가 일어날 것입니다.
|
||||
|
||||
이 문제는 부모와 내부 컴포넌트가 같은 객체에 대한 참조를 공유하기 때문에 발생합니다. `onClick` 함수의 두 번째 줄에서 객체에 대한 변경이 일어날 때, 내부 컴포넌트의 prop도 변경될 것입니다. 따라서 다시 렌더링 되는 프로세스가 시작될 때 `shouldComponentUpdate`가 호출되고 `this.props.value.foo`가 `nextProps.value.foo`와 같게 됩니다. 실제로 `this.props.value`는 `nextProps.value`와 같은 객체이기 때문입니다.
|
||||
|
||||
그에따라 prop의 변경을 놓치게 되어 다시 렌더링하는 프로세스가 중단되고, UI는 `'bar'`에서 `'barbar'`로 업데이트되지 않습니다.
|
||||
그에따라 prop의 변경을 놓치게 되어 다시 렌더링하는 프로세스가 중단되고, UI는 `'bar'`에서 `'barbar'`로 업데이트되지 않습니다.
|
||||
|
||||
## 구원자 Immutable-js
|
||||
|
||||
@@ -135,7 +135,7 @@ React.createClass({
|
||||
|
||||
* *불변성(Immutable)*: 컬렉션이 한번 생성되면, 이 후 다른 시점에 변경될 수 없습니다.
|
||||
* *영속성(Persistent)*: 새로운 컬렉션이 이전의 컬렉션이나 셋(set) 같은 뮤테이션(mutation)에서 생성될 수 있습니다. 기존의 컬렉션은 새로운 컬렉션이 생성된 후에도 여전히 유효합니다.
|
||||
* *구조의 공유(Structural Sharing)*: 새로운 컬렉션은 가능한 한 원래의 컬렉션과 같은 구조를 사용해 생성됩니다. 공간 효율성과 적절한 성능을 위해 복사를 최소화합니다.
|
||||
* *구조의 공유(Structural Sharing)*: 새로운 컬렉션은 가능한 한 원래의 컬렉션과 같은 구조를 사용해 생성됩니다. 공간 효율성과 적절한 성능을 위해 복사를 최소화합니다.
|
||||
|
||||
불변성은 변경의 추적을 비용을 줄여줍니다; 변경은 항상 새로운 객체에만 발생하기 때문에 객체에 대한 참조가 변경될 때만 확인하면 됩니다. 예를 들어 일반적인 JavaScript 코드에서는:
|
||||
|
||||
@@ -150,7 +150,7 @@ x === y; // true
|
||||
|
||||
```javascript
|
||||
var SomeRecord = Immutable.Record({ foo: null });
|
||||
var x = new SomeRecord({ foo: 'bar' });
|
||||
var x = new SomeRecord({ foo: 'bar' });
|
||||
var y = x.set('foo', 'baz');
|
||||
x === y; // false
|
||||
```
|
||||
@@ -190,7 +190,7 @@ this.users = Immutable.List();
|
||||
this.messages = Immutable.List();
|
||||
```
|
||||
|
||||
각각의 *페이로드* 타입을 처리하는 기능을 구현하는 것은 꽤 간단합니다. 예를 들면, store가 새 메시지를 나타내는 페이로드를 확인할 때 레코드를 새로 생성하고 메시지 리스트에 추가할 수 있습니다.
|
||||
각각의 *페이로드* 타입을 처리하는 기능을 구현하는 것은 꽤 간단합니다. 예를 들면, store가 새 메시지를 나타내는 페이로드를 확인할 때 레코드를 새로 생성하고 메시지 리스트에 추가할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
this.messages = this.messages.push(new Message({
|
||||
|
||||
@@ -17,7 +17,7 @@ React 컴포넌트의 인스턴스는 React가 렌더링 시에 내부적으로
|
||||
setState(function|object nextState[, function callback])
|
||||
```
|
||||
|
||||
`nextState`를 현재 state에 합칩니다. 이벤트 핸들러와 서버 요청 콜백에서 UI 업데이트를 발생시키기 위해 이 메소드를 주로 사용합니다.
|
||||
`nextState`를 현재 state에 합칩니다. 이벤트 핸들러와 서버 요청 콜백에서 UI 업데이트를 발생시키기 위해 이 메소드를 주로 사용합니다.
|
||||
|
||||
첫번째 인자는 업데이트를 위한 키를 0개 이상 가진 객체이거나 업데이트를 위한 키들을 포함한 객체를 반환하는 함수(의 state나 props)일 수 있습니다.
|
||||
|
||||
@@ -84,7 +84,7 @@ DOMElement getDOMNode()
|
||||
|
||||
> 주의:
|
||||
>
|
||||
> getDOMNode는 비 추천 상태가 되었고 [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode)로 교체되었습니다.
|
||||
> getDOMNode는 [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode)로 교체되었습니다.
|
||||
>
|
||||
> 이 메소드는 `React.Component`를 확장한 ES6 `class` 컴포넌트에서는 사용할 수 없습니다. React의 미래 버전에서 이는 완전히 사라지게 될 것입니다.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user