Reanimated 4 = CSS for React Native?
- Reanimated 4는 React Native에서 CSS 스타일 애니메이션을 가능하게 하여 웹 개발자들이 더 쉽게 접근할 수 있게 되었습니다. 🎨
- 기존의 shared values와 with Spring을 사용한 애니메이션 방식 대신 CSS transitions과 animations를 활용할 수 있습니다. 🔄
- Reanimated 4는 새로운 아키텍처에서만 호환되므로, 기존 아키텍처를 사용하는 앱은 Reanimated 3에 머물러야 합니다. ⚠️
- CSS transitions은 상태 변화에 따라 한 번 실행되는 반면, CSS animations은 반복적이며 animation play state를 통해 제어가 가능합니다. ⏯️
- Worklet은 UI 스레드에서 실행되어 성능을 향상시키며, 이제 독립적인 패키지로 분리되어 다른 프로젝트에서도 활용할 수 있습니다. 🧵
- Reanimated 4는 React Native의 특정 버전(0.78~0.81)에서만 작동하므로, 앱 버전을 확인해야 합니다. 🔢
- 향후 shared element transitions 기능이 추가될 예정이며, 이는 새로운 아키텍처에서만 지원됩니다. ✨
- CSS 스타일 속성 지원 범위가 제한적이므로, 애니메이션 적용 시 지원되는 속성 테이블을 확인해야 합니다. ✅
- Reanimated 4는 기존 shared values 애니메이션을 대체하는 것이 아니라, 점진적으로 새로운 API를 도입하고 복잡한 애니메이션에는 기존 방식을 유지하는 것이 좋습니다. ➕
- 모듈화된 접근 방식으로 패키지 유지 관리가 용이해지고, 최종적으로 번들 크기를 줄일 수 있습니다. 📦