리액트 개발자를 위한 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();

 

여기서 핵심은 이 옵션입니다.

 

useNativeDriver: true

이게 바로 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 써야 하나 말아야 하나” 고민하는 분들께
조금이라도 기준이 되었으면 좋겠습니다.