리액트 개발자를 위한 Animated 설명
“왜 써야 하는지부터, 언제 쓰면 안 되는지까지”
React Native를 하다 보면
한 번쯤은 Animated를 마주치게 됩니다.
공식 문서도 있고 예제도 많은데,
막상 써보려고 하면 이런 생각이 먼저 듭니다.
“이거… 왜 이렇게 어려워?”
“useState로 opacity 바꾸면 되는 거 아냐?”
“이걸 꼭 써야 해?”
저도 처음엔 Animated가 괜히 복잡한 API 같았고,
실제로 몇 번은 안 써도 될 곳에 억지로 쓰다가 코드만 더 꼬였던 적도 있습니다.
이 글에서는
리액트 개발자 기준에서 Animated를 왜 쓰는지, 언제 써야 하는지
최대한 사람 말로 정리해보려고 합니다.
Animated는 뭐 하는 놈인가?
한 줄로 요약하면 이겁니다.
“부드러운 애니메이션을 성능 저하 없이 처리하기 위한 도구”
일반적인 리액트 상태 변경(useState)으로도
opacity, translate 정도는 구현할 수 있습니다.
그런데 문제가 하나 있습니다.
👉 프레임 드랍
특히 React Native에서는
JS 스레드가 바쁠 때 애니메이션까지 같이 돌리면
스크롤이 끊기거나 터치가 먹통이 되는 상황이 자주 나옵니다.
Animated는 이걸 해결하려고 만들어진 API입니다.
useState 애니메이션 vs Animated 차이
예를 들어 이런 코드가 있다고 해봅시다.
const [opacity, setOpacity] = useState(0);
setOpacity(1);
이건 즉시 값이 바뀌는 것이지
“부드럽게 변화”하는 건 아닙니다.
물론 setInterval이나 setTimeout으로 흉내는 낼 수 있지만
👉 성능도 안 좋고, 코드도 지옥이 됩니다.
Animated는 이렇게 씁니다.
const opacity = useRef(new Animated.Value(0)).current;
Animated.timing(opacity, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();여기서 핵심은 이 옵션입니다.
이게 바로 Animated의 존재 이유입니다.
useNativeDriver가 중요한 이유
React Native 구조를 아주 단순하게 말하면:
- JS 스레드: 로직, 상태, 네트워크
- Native 스레드: 실제 화면 그리기
useNativeDriver: true를 쓰면
👉 JS 스레드가 바빠도 애니메이션은 네이티브에서 계속 돌아갑니다
그래서:
- 스크롤 중에도 애니메이션이 끊기지 않고
- 터치 이벤트도 안정적으로 처리됩니다
이 차이가 실제 앱에서는 꽤 큽니다.
Animated를 써야 하는 대표적인 상황
제가 실제로 써보면서 느낀 기준은 이렇습니다.
✅ 써야 하는 경우
- opacity, translate, scale 같은 연속적인 변화
- 스크롤 연동 애니메이션
- 모달, 바텀시트, 헤더 숨김/노출
- 사용자 체감이 중요한 인터랙션
❌ 굳이 안 써도 되는 경우
- 단순 show / hide
- 한 번만 바뀌는 UI 상태
- 성능 영향 없는 작은 UI
Animated는 만능이 아닙니다.
필요한 곳에만 쓰는 게 오히려 코드 품질이 좋아집니다.
Animated가 어렵게 느껴지는 이유
대부분 여기서 막힙니다.
- Animated.Value
- Animated.timing
- interpolate
- addListener
솔직히 말하면
API 설계가 직관적인 편은 아닙니다.
그래서 요즘은:
- Reanimated
- Moti
- Gesture Handler
같은 라이브러리들이 더 많이 쓰이기도 합니다.
그럼에도 Animated를 알아야 하는 이유는 명확합니다.
👉 기본 개념은 전부 Animated에서 시작했기 때문입니다.
결론: Animated를 이렇게 생각하면 편합니다
- Animated는 “애니메이션용 상태 관리 도구”
- 성능이 중요한 순간에만 사용
- 모든 UI에 쓰려고 하지 말 것
- 이해 안 되면 interpolate부터 건너뛰어도 됨
처음엔 어렵게 느껴져도
한두 번 실제 문제를 해결해보면
“아, 이래서 쓰는구나” 하고 감이 옵니다.
저도 그랬습니다.
마무리
Animated는
리액트 개발자가 한 단계 올라갈 때 꼭 한 번은 부딪히는 벽 같은 존재입니다.
피할 수 있다면 피하고 싶지만,
한 번 넘어두면 이후 UI 구현이 훨씬 편해집니다.
이 글이
“Animated 써야 하나 말아야 하나” 고민하는 분들께
조금이라도 기준이 되었으면 좋겠습니다.