diff --git a/docs/04-multiple-components.ko-KR.md b/docs/04-multiple-components.ko-KR.md index ad6b2e1a..1012cd81 100644 --- a/docs/04-multiple-components.ko-KR.md +++ b/docs/04-multiple-components.ko-KR.md @@ -112,6 +112,7 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트 ``` + ### 동적 자식 자식들이 섞이거나(검색의 결과같은 경우) 새로운 컴포넌트가 목록의 앞에 추가(스트림같은 경우)된다면 상황은 점점 더 까다로워집니다. 이런 때에의 동일성과 각 자식의 상태는 반드시 랜더 패스 간에 유지돼야 합니다. 각 자식에 `key`를 할당 함으로써 독자적으로 식별할 수 있습니다. diff --git a/docs/10.1-animation.ko-KR.md b/docs/10.1-animation.ko-KR.md new file mode 100644 index 00000000..45a46644 --- /dev/null +++ b/docs/10.1-animation.ko-KR.md @@ -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/) 라이브러리에 영향을 받았습니다. + + +### 시작하기 + +`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 ( +
+ {item} +
+ ); + }.bind(this)); + return ( +
+ + + {items} + +
+ ); + } +}); +``` +> 주의: +> +> `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 ( +
+ + {item} + +
+ ); + }, this); + return ( +
+ + {items} +
+ ); + } +``` + +### 아이템 하나이거나 없을 때의 애니메이션 + +위의 에제에서 `ReactCSSTransitionGroup`에 아이템 목록을 렌더했지만, `ReactCSSTransitionGroup`의 자식은 하나이거나 없을 수도 있습니다. 이는 한 엘리먼트가 들어오고 나가는 것의 애니메이션을 가능하게 합니다. 비슷하게, 현재 엘리먼트가 나가는 동안 새 앨리먼트의 애니메이션을 하면, 새 엘리먼트가 현재 엘리먼트를 교체하는 애니메이션을 만들 수 있습니다. 예를 들어 이렇게 간단한 이미지 회전 베너(carousel)를 구현할 수 있습니다. + +```javascript{10-12} +var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; + +var ImageCarousel = React.createClass({ + propTypes: { + imageSrc: React.PropTypes.string.isRequired + }, + render: function() { + return ( +
+ + + +
+ ); + } +}); +``` + +### 애니메이션 비활성화 + +원한다면 `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으로 이 행동을 바꿀 수 있습니다. 예를 들어, `