Shim Won
10 years ago
committed by
Jay Jaeho Lee
Jay Jaeho Lee
2 changed files with 186 additions and 0 deletions
@ -0,0 +1,185 @@ |
|||
--- |
|||
id: animation-ko-KR |
|||
title: 애니메이션 |
|||
permalink: animation-ko-KR.html |
|||
prev: addons-ko-KR.html |
|||
next: two-way-binding-helpers-ko-KR.html |
|||
--- |
|||
|
|||
React에는 애니메이션을 위한 저 수준 API로 `ReactTransitionGroup` 애드온 컴포넌트가 있고 간단히 기초 CSS 애니메이션과 트랜지션을 구현할 수 있는 `ReactCSSTransitionGroup`가 있습니다. |
|||
|
|||
## 고 레벨 API: `ReactCSSTransitionGroup` |
|||
|
|||
`ReactCSSTransitionGroup`는 `ReactTransitionGroup`를 기반으로 React 컴포넌트가 DOM에 들어가거나 나올때의 CSS의 트랜지션과 애니메이션을 구현하기 쉽게합니다. 이는 [ng-animate](http://www.nganimate.org/) 라이브러리에 영향을 받았습니다. |
|||
|
|||
<a name="getting-stared"></a> |
|||
### 시작하기 |
|||
|
|||
`ReactCSSTransitionGroup`은 `ReactTransitions`을 위한 인터페이스입니다. 이는 애니메이션을 제어할 모든 컴포넌트를 감싸는 하나의 엘리먼트 입니다. 아래는 목록의 아이템을 페이드 인/아웃하는 간단한 예제입니다. |
|||
|
|||
```javascript{28-30} |
|||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; |
|||
|
|||
var TodoList = React.createClass({ |
|||
getInitialState: function() { |
|||
return {items: ['hello', 'world', 'click', 'me']}; |
|||
}, |
|||
handleAdd: function() { |
|||
var newItems = |
|||
this.state.items.concat([prompt('Enter some text')]); |
|||
this.setState({items: newItems}); |
|||
}, |
|||
handleRemove: function(i) { |
|||
var newItems = this.state.items; |
|||
newItems.splice(i, 1); |
|||
this.setState({items: newItems}); |
|||
}, |
|||
render: function() { |
|||
var items = this.state.items.map(function(item, i) { |
|||
return ( |
|||
<div key={item} onClick={this.handleRemove.bind(this, i)}> |
|||
{item} |
|||
</div> |
|||
); |
|||
}.bind(this)); |
|||
return ( |
|||
<div> |
|||
<button onClick={this.handleAdd}>Add Item</button> |
|||
<ReactCSSTransitionGroup transitionName="example"> |
|||
{items} |
|||
</ReactCSSTransitionGroup> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
> 주의: |
|||
> |
|||
> `ReactCSSTransitionGroup`의 모든 자식은 [`key` 어트리뷰트](/react/docs/multiple-components-ko-KR.html#dynamic-children)를 반드시 만들어야 합니다. 한 아이템을 렌더한다 해도 예외는 아닙니다. 키는 React가 어떤 자식이 들어오고, 나가고, 머무르는지 파악할 때 사용합니다. |
|||
|
|||
이 컴포넌트에서 새로운 아이템이 `ReactCSSTransitionGroup`에 추가되면 `example-enter` 아이템은 CSS 클래스를 가지게 되고 다음 순간에 `example-enter-active` CSS 클래스가 추가됩니다. 이는 `transitionName` prop을 기반으로 한 관례입니다. |
|||
|
|||
이 클래스들은 CSS 애니메이션이나 트랜지션을 일으키는데 사용할 수 있습니다. 예를 들어, 이 CSS를 넣은 후 아이템을 추가해 보세요. |
|||
|
|||
```css |
|||
.example-enter { |
|||
opacity: 0.01; |
|||
transition: opacity .5s ease-in; |
|||
} |
|||
|
|||
.example-enter.example-enter-active { |
|||
opacity: 1; |
|||
} |
|||
``` |
|||
|
|||
`ReactCSSTransitionGroup`에서 아이템을 제거하려해도 DOM에는 남게 됩니다. 만약 애드온을 React의 최소화하지 않은 빌드와 사용한다면, 애니메이션이나 트랜지션이 일어나는 것을 예상하고 있었다는 React의 경고를 보게 될 것입니다. 그게 바로 `ReactCSSTransitionGroup`가 DOM 엘리먼트를 애니메이션이 끝날때 까지 페이지에 남겨두는 이유입니다. 이 CSS를 넣어보세요. |
|||
|
|||
```css |
|||
.example-leave { |
|||
opacity: 1; |
|||
transition: opacity .5s ease-in; |
|||
} |
|||
|
|||
.example-leave.example-leave-active { |
|||
opacity: 0.01; |
|||
} |
|||
``` |
|||
|
|||
### 애니메이션 그룹이 작동하려면 마운트가 필요 |
|||
|
|||
자식들에게 트랜지션을 적용하려면 `ReactCSSTransitionGroup`은 이미 DOM에 마운트되어 있어야 합니다. 예를 들어, 밑의 코드는 동작하지 않을 것입니다. 왜냐하면 `ReactCSSTransitionGroup` 안에서 새 아이템을 마운트하는 대신 새 아이템과 같이 `ReactCSSTransitionGroup`를 마운트 했기 때문입니다. 이 것을 위에있는 [시작하기](#getting-stared) 항목과 비교해보세요. |
|||
|
|||
```javascript{12-15} |
|||
render: function() { |
|||
var items = this.state.items.map(function(item, i) { |
|||
return ( |
|||
<div key={item} onClick={this.handleRemove.bind(this, i)}> |
|||
<ReactCSSTransitionGroup transitionName="example"> |
|||
{item} |
|||
</ReactCSSTransitionGroup> |
|||
</div> |
|||
); |
|||
}, this); |
|||
return ( |
|||
<div> |
|||
<button onClick={this.handleAdd}>Add Item</button> |
|||
{items} |
|||
</div> |
|||
); |
|||
} |
|||
``` |
|||
|
|||
### 아이템 하나이거나 없을 때의 애니메이션 |
|||
|
|||
위의 에제에서 `ReactCSSTransitionGroup`에 아이템 목록을 렌더했지만, `ReactCSSTransitionGroup`의 자식은 하나이거나 없을 수도 있습니다. 이는 한 엘리먼트가 들어오고 나가는 것의 애니메이션을 가능하게 합니다. 비슷하게, 현재 엘리먼트가 나가는 동안 새 앨리먼트의 애니메이션을 하면, 새 엘리먼트가 현재 엘리먼트를 교체하는 애니메이션을 만들 수 있습니다. 예를 들어 이렇게 간단한 이미지 회전 베너(carousel)를 구현할 수 있습니다. |
|||
|
|||
```javascript{10-12} |
|||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; |
|||
|
|||
var ImageCarousel = React.createClass({ |
|||
propTypes: { |
|||
imageSrc: React.PropTypes.string.isRequired |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div> |
|||
<ReactCSSTransitionGroup transitionName="carousel"> |
|||
<img src={this.props.imageSrc} key={this.props.imageSrc} /> |
|||
</ReactCSSTransitionGroup> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
### 애니메이션 비활성화 |
|||
|
|||
원한다면 `enter`나 `leave` 애니메이션을 비활성화 할 수 있습니다. 예를 들어, `enter` 애니메이션만 필요하고 `leave` 애니메이션은 필요없지만, `ReactCSSTransitionGroup`이 DOM 노드를 없애기 전 애니메이션이 완료되길 기다리고 있는 경우에 사용할 수 있습니다. `ReactCSSTransitionGroup`에 `transitionEnter={false}`나 `transitionLeave={false}` props를 추가하면 그 애니메이션을 비활성화 할 수 있습니다. |
|||
|
|||
> 주의: |
|||
> |
|||
> `ReactCSSTransitionGroup`를 사용할 때는, 트랜지션이 종료되었을 때나 애니메이션 근처에서 더 복잡한 로직을 실행할 때 컴포넌트에 통지할 방법이 없습니다. 보다 세밀하게 제어하고 싶다면, 커스텀 트랜지션에 필요한 훅을 제공하는 저수준 `ReactTransitionGroup` API를 이용할 수 있습니다. |
|||
|
|||
## 저수준 API: `ReactTransitionGroup` |
|||
|
|||
`ReactTransitionGroup`은 애니메이션의 기초입니다. 이는 `React.addons.TransitionGroup`으로 접근할 수 있습니다. 위에 있는 예제처럼 자식들이 선언적으로 여기에 추가되거나 삭제되는 경우, 특별한 훅이 이 생명주기에서 호출됩니다. |
|||
|
|||
### `componentWillEnter(callback)` |
|||
|
|||
이는 이미 있는 `TransitionGroup`에 컴포넌트를 추가할 때 호출되는 `componentDidMount()`와 같이 호출됩니다. 이는 `callback`이 호출될 때까지 다른 애니메이션을 막습니다. `TransitionGroup`의 최조 렌더에서는 불려지지 않습니다. |
|||
|
|||
### `componentDidEnter()` |
|||
|
|||
이는 `componentWillEnter`에 넘겨주었던 `callback` 함수가 호출된 다음에 호출됩니다. |
|||
|
|||
### `componentWillLeave(callback)` |
|||
|
|||
이는 `ReactTransitionGroup`에서 자식이 제거되었을 때 호출됩니다. 자식이 제거되었다고 해도 `ReactTransitionGroup`는 `callback`이 호출될 때까지 DOM에 자식을 남겨둡니다. |
|||
|
|||
### `componentDidLeave()` |
|||
|
|||
이는 `willLeave` `callback`이 호출될 때 호출됩니다. (`componentWillUnmount`와 같은 타이밍) |
|||
|
|||
### 다른 컴포넌트 렌더하기 |
|||
|
|||
기본적으로 `ReactTransitionGroup`은 `span`으로 렌더합니다. `component` prop으로 이 행동을 바꿀 수 있습니다. 예를 들어, `<ul>`을 렌더하고 싶다면 이렇게 하면됩니다. |
|||
|
|||
```javascript{1} |
|||
<ReactTransitionGroup component="ul"> |
|||
... |
|||
</ReactTransitionGroup> |
|||
``` |
|||
|
|||
모든 React가 렌더할 수 있는 DOM 컴포넌트는 사용할 수 있습니다. 하지만 `component`가 DOM 컴포넌트일 필요는 없습니다. React 컴포넌트라면 무엇이든 넣을 수 있습니다. 직접 구현한 컴포넌트여도 됩니다! |
|||
|
|||
> 주의: |
|||
> |
|||
> v0.12이전에는, DOM 컴포넌트를 사용할 때, `component` prop은 `React.DOM.*`로 참조할 필요가 있었습니다. 이제 컴포넌트가 단순히 `React.createElement`로 전달되기 때문에, `component` prop은 스트링이어야 합니다. 복합 컴포넌트는 팩토리를 넘겨야 합니다. |
|||
|
|||
사용자 정의를 포함한 어떤 프로퍼티도 렌더된 컴포넌트의 프로퍼티가 됩니다. 예를 들어, `<ul>`에 css 클래스를 넣어서 렌더하려면 이렇게 하면됩니다. |
|||
|
|||
```javascript{1} |
|||
<ReactTransitionGroup component="ul" className="animated-list"> |
|||
... |
|||
</ReactTransitionGroup> |
|||
``` |
|||
Loading…
Reference in new issue