Translate 10.1 to Korean
- Up to 678ec31
Shim Won committed
Mar 7, 2015 at 13:36 UTC
ec91b4184f9719f6219a1dea9b172e49f73a43be
2 files changed
+186
docs/docs/04-multiple-components.ko-KR.md
+1
@@ -112,6 +112,7 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트
112
```
113
114
115
+<a name="dynamic-children"></a>
116
### 동적 자식
117
118
자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 랜더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다.
docs/docs/10.1-animation.ko-KR.md
new
+185
@@ -0,0 +1,185 @@
1
+---
2
+id: animation-ko-KR
3
+title: 애니메이션
4
+permalink: animation-ko-KR.html
5
+prev: addons-ko-KR.html
6
+next: two-way-binding-helpers-ko-KR.html
7
+---
8
+
9
+React에는 애니메이션을 위한 저 수준 API로 `ReactTransitionGroup` 애드온 컴포넌트가 있고 간단히 기초 CSS 애니메이션과 트랜지션을 구현할 수 있는 `ReactCSSTransitionGroup`가 있습니다.
10
+
11
+## 고 레벨 API: `ReactCSSTransitionGroup`
12
+
13
+`ReactCSSTransitionGroup`는 `ReactTransitionGroup`를 기반으로 React 컴포넌트가 DOM에 들어가거나 나올때의 CSS의 트랜지션과 애니메이션을 구현하기 쉽게합니다. 이는 [ng-animate](http://www.nganimate.org/) 라이브러리에 영향을 받았습니다.
14
+
15
+<a name="getting-stared"></a>
16
+### 시작하기
17
+
18
+`ReactCSSTransitionGroup`은 `ReactTransitions`을 위한 인터페이스입니다. 이는 애니메이션을 제어할 모든 컴포넌트를 감싸는 하나의 엘리먼트 입니다. 아래는 목록의 아이템을 페이드 인/아웃하는 간단한 예제입니다.
19
+
20
+```javascript{28-30}
21
+var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
22
+
23
+var TodoList = React.createClass({
24
+ getInitialState: function() {
25
+ return {items: ['hello', 'world', 'click', 'me']};
26
+ },
27
+ handleAdd: function() {
28
+ var newItems =
29
+ this.state.items.concat([prompt('Enter some text')]);
30
+ this.setState({items: newItems});
31
+ },
32
+ handleRemove: function(i) {
33
+ var newItems = this.state.items;
34
+ newItems.splice(i, 1);
35
+ this.setState({items: newItems});
36
+ },
37
+ render: function() {
38
+ var items = this.state.items.map(function(item, i) {
39
+ return (
40
+ <div key={item} onClick={this.handleRemove.bind(this, i)}>
41
+ {item}
42
+ </div>
43
+ );
44
+ }.bind(this));
45
+ return (
46
+ <div>
47
+ <button onClick={this.handleAdd}>Add Item</button>
48
+ <ReactCSSTransitionGroup transitionName="example">
49
+ {items}
50
+ </ReactCSSTransitionGroup>
51
+ </div>
52
+ );
53
+ }
54
+});
55
+```
56
+> 주의:
57
+>
58
+> `ReactCSSTransitionGroup`의 모든 자식은 [`key` 어트리뷰트](/react/docs/multiple-components-ko-KR.html#dynamic-children)를 반드시 만들어야 합니다. 한 아이템을 렌더한다 해도 예외는 아닙니다. 키는 React가 어떤 자식이 들어오고, 나가고, 머무르는지 파악할 때 사용합니다.
59
+
60
+이 컴포넌트에서 새로운 아이템이 `ReactCSSTransitionGroup`에 추가되면 `example-enter` 아이템은 CSS 클래스를 가지게 되고 다음 순간에 `example-enter-active` CSS 클래스가 추가됩니다. 이는 `transitionName` prop을 기반으로 한 관례입니다.
61
+
62
+이 클래스들은 CSS 애니메이션이나 트랜지션을 일으키는데 사용할 수 있습니다. 예를 들어, 이 CSS를 넣은 후 아이템을 추가해 보세요.
63
+
64
+```css
65
+.example-enter {
66
+ opacity: 0.01;
67
+ transition: opacity .5s ease-in;
68
+}
69
+
70
+.example-enter.example-enter-active {
71
+ opacity: 1;
72
+}
73
+```
74
+
75
+`ReactCSSTransitionGroup`에서 아이템을 제거하려해도 DOM에는 남게 됩니다. 만약 애드온을 React의 최소화하지 않은 빌드와 사용한다면, 애니메이션이나 트랜지션이 일어나는 것을 예상하고 있었다는 React의 경고를 보게 될 것입니다. 그게 바로 `ReactCSSTransitionGroup`가 DOM 엘리먼트를 애니메이션이 끝날때 까지 페이지에 남겨두는 이유입니다. 이 CSS를 넣어보세요.
76
+
77
+```css
78
+.example-leave {
79
+ opacity: 1;
80
+ transition: opacity .5s ease-in;
81
+}
82
+
83
+.example-leave.example-leave-active {
84
+ opacity: 0.01;
85
+}
86
+```
87
+
88
+### 애니메이션 그룹이 작동하려면 마운트가 필요
89
+
90
+자식들에게 트랜지션을 적용하려면 `ReactCSSTransitionGroup`은 이미 DOM에 마운트되어 있어야 합니다. 예를 들어, 밑의 코드는 동작하지 않을 것입니다. 왜냐하면 `ReactCSSTransitionGroup` 안에서 새 아이템을 마운트하는 대신 새 아이템과 같이 `ReactCSSTransitionGroup`를 마운트 했기 때문입니다. 이 것을 위에있는 [시작하기](#getting-stared) 항목과 비교해보세요.
91
+
92
+```javascript{12-15}
93
+ render: function() {
94
+ var items = this.state.items.map(function(item, i) {
95
+ return (
96
+ <div key={item} onClick={this.handleRemove.bind(this, i)}>
97
+ <ReactCSSTransitionGroup transitionName="example">
98
+ {item}
99
+ </ReactCSSTransitionGroup>
100
+ </div>
101
+ );
102
+ }, this);
103
+ return (
104
+ <div>
105
+ <button onClick={this.handleAdd}>Add Item</button>
106
+ {items}
107
+ </div>
108
+ );
109
+ }
110
+```
111
+
112
+### 아이템 하나이거나 없을 때의 애니메이션
113
+
114
+위의 에제에서 `ReactCSSTransitionGroup`에 아이템 목록을 렌더했지만, `ReactCSSTransitionGroup`의 자식은 하나이거나 없을 수도 있습니다. 이는 한 엘리먼트가 들어오고 나가는 것의 애니메이션을 가능하게 합니다. 비슷하게, 현재 엘리먼트가 나가는 동안 새 앨리먼트의 애니메이션을 하면, 새 엘리먼트가 현재 엘리먼트를 교체하는 애니메이션을 만들 수 있습니다. 예를 들어 이렇게 간단한 이미지 회전 베너(carousel)를 구현할 수 있습니다.
115
+
116
+```javascript{10-12}
117
+var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
118
+
119
+var ImageCarousel = React.createClass({
120
+ propTypes: {
121
+ imageSrc: React.PropTypes.string.isRequired
122
+ },
123
+ render: function() {
124
+ return (
125
+ <div>
126
+ <ReactCSSTransitionGroup transitionName="carousel">
127
+ <img src={this.props.imageSrc} key={this.props.imageSrc} />
128
+ </ReactCSSTransitionGroup>
129
+ </div>
130
+ );
131
+ }
132
+});
133
+```
134
+
135
+### 애니메이션 비활성화
136
+
137
+원한다면 `enter`나 `leave` 애니메이션을 비활성화 할 수 있습니다. 예를 들어, `enter` 애니메이션만 필요하고 `leave` 애니메이션은 필요없지만, `ReactCSSTransitionGroup`이 DOM 노드를 없애기 전 애니메이션이 완료되길 기다리고 있는 경우에 사용할 수 있습니다. `ReactCSSTransitionGroup`에 `transitionEnter={false}`나 `transitionLeave={false}` props를 추가하면 그 애니메이션을 비활성화 할 수 있습니다.
138
+
139
+> 주의:
140
+>
141
+> `ReactCSSTransitionGroup`를 사용할 때는, 트랜지션이 종료되었을 때나 애니메이션 근처에서 더 복잡한 로직을 실행할 때 컴포넌트에 통지할 방법이 없습니다. 보다 세밀하게 제어하고 싶다면, 커스텀 트랜지션에 필요한 훅을 제공하는 저수준 `ReactTransitionGroup` API를 이용할 수 있습니다.
142
+
143
+## 저수준 API: `ReactTransitionGroup`
144
+
145
+`ReactTransitionGroup`은 애니메이션의 기초입니다. 이는 `React.addons.TransitionGroup`으로 접근할 수 있습니다. 위에 있는 예제처럼 자식들이 선언적으로 여기에 추가되거나 삭제되는 경우, 특별한 훅이 이 생명주기에서 호출됩니다.
146
+
147
+### `componentWillEnter(callback)`
148
+
149
+이는 이미 있는 `TransitionGroup`에 컴포넌트를 추가할 때 호출되는 `componentDidMount()`와 같이 호출됩니다. 이는 `callback`이 호출될 때까지 다른 애니메이션을 막습니다. `TransitionGroup`의 최조 렌더에서는 불려지지 않습니다.
150
+
151
+### `componentDidEnter()`
152
+
153
+이는 `componentWillEnter`에 넘겨주었던 `callback` 함수가 호출된 다음에 호출됩니다.
154
+
155
+### `componentWillLeave(callback)`
156
+
157
+이는 `ReactTransitionGroup`에서 자식이 제거되었을 때 호출됩니다. 자식이 제거되었다고 해도 `ReactTransitionGroup`는 `callback`이 호출될 때까지 DOM에 자식을 남겨둡니다.
158
+
159
+### `componentDidLeave()`
160
+
161
+이는 `willLeave` `callback`이 호출될 때 호출됩니다. (`componentWillUnmount`와 같은 타이밍)
162
+
163
+### 다른 컴포넌트 렌더하기
164
+
165
+기본적으로 `ReactTransitionGroup`은 `span`으로 렌더합니다. `component` prop으로 이 행동을 바꿀 수 있습니다. 예를 들어, `<ul>`을 렌더하고 싶다면 이렇게 하면됩니다.
166
+
167
+```javascript{1}
168
+<ReactTransitionGroup component="ul">
169
+ ...
170
+</ReactTransitionGroup>
171
+```
172
+
173
+모든 React가 렌더할 수 있는 DOM 컴포넌트는 사용할 수 있습니다. 하지만 `component`가 DOM 컴포넌트일 필요는 없습니다. React 컴포넌트라면 무엇이든 넣을 수 있습니다. 직접 구현한 컴포넌트여도 됩니다!
174
+
175
+> 주의:
176
+>
177
+> v0.12이전에는, DOM 컴포넌트를 사용할 때, `component` prop은 `React.DOM.*`로 참조할 필요가 있었습니다. 이제 컴포넌트가 단순히 `React.createElement`로 전달되기 때문에, `component` prop은 스트링이어야 합니다. 복합 컴포넌트는 팩토리를 넘겨야 합니다.
178
+
179
+사용자 정의를 포함한 어떤 프로퍼티도 렌더된 컴포넌트의 프로퍼티가 됩니다. 예를 들어, `<ul>`에 css 클래스를 넣어서 렌더하려면 이렇게 하면됩니다.
180
+
181
+```javascript{1}
182
+<ReactTransitionGroup component="ul" className="animated-list">
183
+ ...
184
+</ReactTransitionGroup>
185
+```