ReactJS - 애니메이션: 컴포넌트를 활성화하다

안녕하세요, 미래의 React 애니메이션 마법사 여러분! ReactJS 애니메이션의 흥미로운 여정에 여러분을 안내하게 되어 매우 기쁩니다. 컴퓨터 과학을 가르쳐온 지 오래된 저로서는 애니메이션이 단순히 기능적이지 않고, 오히려 매우 즐겁게 만드는 비밀 재료라고 말할 수 있습니다. 그럼 이제 컴포넌트를 춤추게 하자!

React Transition Group의 마법

애니메이션을 다루기 전에 React Transition Group에 대해 이해해 보겠습니다. 이 것은 우리의 React 애플리케이션에서 부드럽고 눈에 띄는 전환을 만들어주는 훌륭한 도구箱을 가지고 있는 것입니다.

React Transition Group 설치

먼저, React Transition Group을 우리 프로젝트에 초대해야 합니다. 터미널을 엽니다고:

npm install react-transition-group

또는 yarn을 사용하는 경우:

yarn add react-transition-group

훌륭합니다! 이제 우리는 애니메이션의 초능력을 손에 넣었습니다.

Transition: 애니메이션의 기초

Transition 컴포넌트는 집의 기초와 같습니다. 우리가 애니메이션을 짓는 데 견고한 기반을 제공합니다. 간단한 예제로 보겠습니다:

import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}

const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
exiting:  { opacity: 0 },
exited:  { opacity: 0 },
};

const FadeInOut = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<Transition in={inProp} timeout={duration}>
{state => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
내가 사라지고 나타나는 텍스트!
</div>
)}
</Transition>
<button onClick={() => setInProp(!inProp)}>
클릭하여 페이드
</button>
</div>
);
};

이를 분해해 보겠습니다:

1. 우리는 Transition을 'react-transition-group'에서 임포트합니다.
2. 우리는 초기 상태의 defaultStyle과 전환의 각 단계에 대한 transitionStyles을 설정합니다.
3. FadeInOut 컴포넌트는 inProp 상태를 사용하여 가시성을 제어합니다.
4. Transition 컴포넌트는 in (가시성 상태)과 timeout (애니메이션 시간) 두 가지 주요 속성을 받습니다.
5. Transition 내부에서 우리는 현재 전환 상태를 받아 적절한 스타일을 적용합니다.

버튼을 클릭하면 텍스트가 부드럽게 나타나고 사라집니다. 마법이죠?

CSSTransition: CSS와의 만남

이제 CSSTransition으로 게임을 레벨 업해 보겠습니다. 이 것은 Transition의 더 멋진 형제로, CSS 클래스와 무缝하게 작동합니다. 재미있는 예제를 보겠습니다:

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // 이를 곧 만들 것입니다

const Superhero = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<CSSTransition in={inProp} timeout={300} classNames="super">
<div className="superhero">
나는 슈퍼히어로!
</div>
</CSSTransition>
<button onClick={() => setInProp(!inProp)}>
변신!
</button>
</div>
);
};

그리고 우리의 CSS (styles.css):

.superhero {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}

.super-enter {
opacity: 0;
transform: scale(0.9);
}
.super-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.super-exit {
opacity: 1;
}
.super-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}

이렇게 되고 있습니다:

1. 우리는 CSSTransition을 사용합니다.
2. classNames="super"를 지정하여 React에게 super-enter, super-enter-active 등의 클래스를 사용하도록 합니다.
3. 우리의 CSS는 각 전환 단계에서 컴포넌트가 어떻게 보여야 하는지 정의합니다.

"변신!"을 클릭하면 우리의 슈퍼히어로가 확대되고 缩小되면서 드라마틱하게 나타나고 사라집니다. 브라우저에서 슈퍼히어로 영화를 볼 것 같네요!

TransitionGroup: 여러 전환 관리

마지막으로, TransitionGroup에 대해 이야기해 보겠습니다. 이 것은 오케스트라의 지휘자처럼, 여러 전환을 동시에 관리합니다. 실용적인 예제를 보겠습니다:

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './list-styles.css';

const TodoList = () => {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const addItem = () => {
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue('');
};

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="업무를 입력하세요"
/>
<button onClick={addItem}>추가</button>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="item"
>
<div className="todo-item">
{text}
<button onClick={() => removeItem(id)}>X</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
};

그리고 대응하는 CSS (list-styles.css):

.todo-list {
list-style-type: none;
padding: 0;
}

.todo-item {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}

이 예제는 간단한 할 일 목록을 만들어 items가 추가되거나 제거될 때 부드럽게 전환됩니다. 이렇게 되고 있습니다:

1. 우리는 TransitionGroup을 사용하여 목록을 감싸줍니다.
2. 각 아이템은 CSSTransition으로 감싸줍니다.
3. 아이템이 추가되거나 제거될 때 TransitionGroup이 자동으로 전환을 관리합니다.

결과적으로? 매끄럽고 전문적인 모습을 가진 할 일 목록이 프로젝트 매니저를 자랑스럽게 할 것입니다!

마무리

그렇습니다, 여러분! 우리는 React 애니메이션의 세계를 여행했습니다. Transition에서 TransitionGroup까지. 기억하시죠, 애니메이션은 단순히 예쁜 것만이 아니라, 직관적이고 반응적인 인터페이스를 만들어주는 것입니다. 사용자가 애플리케이션을 통해 안내되도록 하십시오.

이제 우리가 다룬 방법들의 빠른 참조 표입니다:

컴포넌트	사용 사례	주요 속성
Transition	기본 전환	in, timeout
CSSTransition	CSS 기반 전환	in, timeout, classNames
TransitionGroup	여러 전환 관리	component (선택 사항)

이제 애니메이션을 해보세요! 그리고 기억하세요, 강력한 힘은 큰 책임을 동반합니다. 애니메이션을 지혜롭게 사용하십시오. 행복한 코딩을!

Credits: Image by storyset