5 React Native Mistakes Web Devs Keep Making
- React Native에서는 CSS 클래스 대신 스타일 객체를 사용해야 하며, NativeWind를 통해 Tailwind CSS를 사용할 수도 있습니다. 🎨
- Expo DOM 컴포넌트를 사용하면 HTML과 유사한 방식으로 UI를 구성할 수 있지만, 크기 및 스크롤 처리에 주의해야 합니다. 🖼️
- React Native에서 화면 간 이동은 React Navigation 또는 Expo Router를 사용하는 것이 좋으며, Expo Router는 파일 기반 라우팅을 지원합니다. 🗺️
- React Native에서 많은 데이터를 렌더링할 때는 FlatList, FlashList, LegendList와 같은 가상화된 리스트 컴포넌트를 사용하여 성능을 최적화해야 합니다. 🗂️
- React Native 프로젝트는 코드베이스가 복잡해지는 것을 방지하기 위해 컴포넌트, 훅, 상수 등을 분리하여 구조화해야 합니다. 🏗️
- 모바일 환경의 특성(키보드, 노치, 제스처 등)을 고려하여 UI를 조정하고, iOS와 Android 모두에서 테스트해야 합니다. 📱
- Expo를 사용하면 개발 생산성을 높일 수 있으며, 다양한 네이티브 기능에 쉽게 접근할 수 있습니다. ✨
- React Native 스타일링은 다양한 옵션이 존재하므로, 프로젝트의 요구사항에 맞는 방법을 선택해야 합니다. 💅
- React Native 앱의 성능은 데이터 렌더링 방식에 크게 영향을 받으므로, 가상화된 리스트를 사용하여 최적화해야 합니다. 🚀
- 모바일 앱 개발 시 UI 요소가 예상치 않게 잘리거나 가려지는 문제를 해결하기 위해 SafeAreaView를 사용해야 합니다. 📐