React Native에서 애니메이션 구현하는 두 가지 방법

React Native에서 애니메이션을 구현하는 방법을 알아봅니다. Animated API와 Reanimated 라이브러리를 사용하여 애니메이션을 구현하고, 두 가지 방법의 차이점을 비교해 프로젝트에 적합한 구현 방법은 무엇인지 살펴보겠습니다.

 

React Native에서 애니메이션의 중요성

애니메이션은 모바일 애플리케이션을 생동감 있게 만들어 주는 중요한 요소입니다. React Native로 앱을 개발하다보면 사용자 경험을 개선하기 위해 애니메이션 추가가 필요한 상황이 있을 수 있는데요. 애니메이션을 사용하게 되면 사용자는 앱을 더 직관적으로 사용할 수 있게 되고, 더 나은 만족감을 느낄 수 있습니다.

사용자 경험의 향상

애니메이션은 단순히 시각적 효과 이상의 역할을 합니다. 예를 들어 버튼을 클릭할 때 버튼이 살짝 커졌다 작아지는 애니메이션이 있다면, 사용자는 앱이 그들의 동작에 반응하고 있음을 느낄 수 있습니다. 이러한 작은 애니메이션들이 모여 사용자의 전체적인 경험을 크게 향상시킵니다. 또한 애니메이션은 사용자가 앱의 흐름을 직관적으로 이해하게 돕는 역할도 합니다.

애니메이션 라이브러리의 선택 기준

React Native에서는 애니메이션을 구현하기 위해 여러 라이브러리를 사용할 수 있습니다. 대표적으로 Animated API와 Reanimated가 있습니다. 두 라이브러리를 사용하여 애니메이션을 구현하는 방법을 알아보고, 각 라이브러리의 장단점을 비교해보겠습니다.

 

React Native Animated API 소개

Animated API란?

Animated API는 React Native에서 기본적으로 제공하는 애니메이션 라이브러리입니다. 간단한 애니메이션을 구현하는 데 매우 유용하며, 사용법이 비교적 직관적입니다. 간단한 애니메이션을 빠르게 구현할 수 있어서 작은 애니메이션 효과를 추가하는 데 큰 도움이 될 수 있습니다.

Animated API 설치 및 기본 사용법

Animated API는 React Native에 내장되어 있어 별도의 설치가 필요하지 않습니다. Animated 모듈을 임포트하여 바로 사용할 수 있습니다.

import React, { useRef, useEffect } from 'react';
import { Animated, View, Button } from 'react-native';

export default function AnimatedExample() {
	const fadeAnim = useRef(new Animated.Value(0)).current;
    
    useEffect(() => {
		Animated.timing(fadeAnim, {
			toValue: 1,
			duration: 2000,
			useNativeDriver: true,
		}).start();
	}, [fadeAnim]);

	return (
		<View>
			<Animated.View style={{ opacity: fadeAnim }}>
				<View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
			</Animated.View>
		</View>
	);
}

 

위 코드에서는 Animated.timing을 사용해 요소의 투명도를 조정하는 간단한 애니메이션을 구현했습니다. useNativeDriver 옵션을 통해 애니메이션 성능을 향상시킬 수 있습니다.

 

React Native Reanimated 라이브러리 소개

Reanimated란?

React Native Reanimated는 더 복잡한 애니메이션을 구현할 수 있도록 만들어진 라이브러리입니다. Animated API와 달리, 네이티브 드라이버를 더 효율적으로 활용하여 성능을 개선합니다.

Reanimated 설치 및 기본 사용법

Reanimated는 별도로 설치해야 하는 라이브러리입니다. 다음 명령어를 사용해 설치할 수 있습니다.

npm install react-native-reanimated

 

설치 후, babel.config.js 파일을 수정하여 Reanimated 플러그인을 추가해야 합니다.

module.exports = {
	presets: ['module:metro-react-native-babel-preset'],
	plugins: ['react-native-reanimated/plugin'],
};

 

Reanimated를 사용하면 고급 애니메이션을 쉽게 구현할 수 있습니다. 다음은 드래그 앤 드롭 애니메이션의 예시입니다.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';

export default function ReanimatedExample() {
	const offset = useSharedValue(0);
    
	const animatedStyle = useAnimatedStyle(() => {
		return {
			transform: [{ translateX: offset.value }],
		};
	});
    
	return (
		<View style={styles.container}>
			<Animated.View
				style={[styles.box, animatedStyle]}
                onTouchStart={() => {
					offset.value = withSpring(Math.random() * 300);
				}}
			/>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	box: {
		width: 100,
		height: 100,
		backgroundColor: 'red',
	},
});

 

위 예시에서는 사용자가 요소를 터치하면 해당 요소가 스프링 애니메이션을 통해 이동하는 효과를 구현했습니다. Reanimated의 useSharedValue와 useAnimatedStyle을 사용하여 애니메이션 상태를 관리할 수 있습니다.

 

Animated와 Reanimated 비교

성능 차이와 특징

Animated API는 간단한 애니메이션을 구현하는 데 적합하며, 사용법이 직관적입니다. 하지만 복잡한 애니메이션의 경우 JavaScript 쓰레드에 부하가 걸릴 수 있습니다. 반면, Reanimated는 네이티브 드라이버를 더 효율적으로 활용하여 성능을 극대화합니다. 특히, Reanimated는 복잡한 제스처 처리나 화면 전환 같은 고급 애니메이션에서 유리합니다.

어떤 상황에서 어떤 라이브러리를 선택할 것인가?

간단한 애니메이션을 구현하거나 빠르게 작업해야 할 때는 Animated API가 적합합니다. 반면, 성능이 중요한 복잡한 애니메이션이나 제스처 기반의 애니메이션을 구현할 때는 Reanimated를 사용하는 것이 좋습니다. 예를 들면, 간단한 버튼 클릭 애니메이션에는 Animated API를, 복잡한 화면 전환에는 Reanimated를 사용하여 각각의 장점을 최대한 활용할 수 있습니다.

 

마무리하며

React Native에서 애니메이션을 구현하는 것은 사용자 경험을 극대화하는 중요한 요소입니다. Animated API와 Reanimated는 각각의 장점이 있으므로 프로젝트의 요구사항에 맞게 선택하는 것이 중요합니다. 애니메이션은 앱의 품질을 한층 더 끌어올리는 중요한 도구인 만큼, 이 글을 통해 애니메이션 구현에 대한 이해를 높이고, React Native 프로젝트에서 보다 생동감 있는 사용자 경험을 제공하는데 도움이 되었으면 좋겠습니다.