React Native에서 @expo/vector-icons 사용을 중단해야 하는 이유
출처: Dev.to
Expo 벡터 아이콘(@expo/vector-icons)에서 React Native 공식 아이콘 패키지로 전환하면 번들 크기를 4MB 이상 줄일 수 있습니다. 이 변경 방법을 확인하고 Expo가 이제 권장하는 이유를 알아보겠습니다.
Expo를 사용해 React Native 앱을 만든 적이 있다면, 아마도 @expo/vector-icons를 사용했을 것입니다.这是一直 아이콘을 위한 기본 솔루션이었지만, 이제 변화하고 있습니다.
Expo는 이제 공식 @react-native-vector-icons 패키지로 전환할 것을 권장하고 있으며, 그 이유는 충분히 타당합니다.
Expo가 처음 @expo/vector-icons를 만들었을 때, 실제 문제를 해결했습니다. 원래의 react-native-vector-icons는 Expo 프로젝트와 잘 맞지 않았으며, 특히 Expo Go에서 또는 OTA 업데이트 시에 문제가 발생했습니다. 그래서 Expo는 expo-font를 이용해 아이콘 폰트를 동적으로 로드하는 래퍼를 만들었습니다.
하지만 이 솔루션은 부담이 되었습니다. react-native-vector-icons를 기대하는 라이브러리를 지원하기 위해 Expo는 Babel 변환을 사용해 이를 @expo/vector-icons로 별칭했습니다. 이로 인해 복잡함과 유지보수 비용이 증가했습니다.
더 중요한 점은 아이콘 폰트 패키지를 유지관리하는 것이 Expo가 가장 잘하는 일이 아니라는 것입니다. Expo는 플랫폼 수준 기능에 집중하고 서드파티 아이콘 집합을 감싸는 데 전념하지 않습니다.
최신 @react-native-vector-icons 패키지(과거의 더 이상 사용되지 않는 react-native-vector-icons와 구분됨)는 직접 expo-font와 통합되어 있습니다. 필요할 때 네이티브 폰트 로딩 API를 호출하므로 Expo Go, 개발 빌드, 그리고 프로덕션 앱 어디서나 작동합니다.
이 패키지들은 Expo 통합을 자체적으로 처리하므로 Expo 래퍼가 더 이상 필요하지 않습니다. Expo는 향후 SDK 릴리스에서 @expo/vector-icons를 폐기할 계획입니다.
번들 크기 감소: 앱은 실제 사용하고 있는 아이콘 세트(하나 또는 두 개)만 사용하더라도 모든 아이콘 폰트를 의도치 않게 번들에 포함시키는 경우가 많습니다. 테스트 앱을 임포트와 의존성만 바꾸는 것으로 4MB가량 줄였습니다.
최신 아이콘 세트: @expo/vector-icons에서는 사용하지 못했던 최신 버전 및 아이콘 세트(예: Lucide)에 접근할 수 있습니다.
개선된 툴킹: createIconSetFromFontello 또는 createIconSetFromIcoMoon을 사용할 때 아이콘 이름을 타입 체크할 수 있습니다. 커스텀 아이콘 세트 생성은 Generator를 사용해 더 쉬워졌습니다.
정리된 설정: 별칭 구성이나 패키지 간 버전 드리프트를 할 필요가 없습니다.
Expo는 자동으로 대부분의 마이그레이션을 처리하는 codemod를 제공합니다:
- 프로젝트 루트에
npx @react-native-vector-icons/codemod실행합니다. 커밋하기 전에 변경 사항을 확인하세요. - 마이그레이션이 성공했는지 확인하려면
npx expo doctor를 실행합니다. 프로젝트에 오래된 패키지가 남아 있는지 확인합니다. - expo-font가 올바르게 설치되고 구성되어 있는지 확인하세요.
node_modules/@react-native-vector-icons/에서의 폰트 경로를 expo-font 설정 플러그인에 추가하지 마세요. 이는 빌드를 깨뜨릴 수 있습니다.- 커스텀 폰트를 사용하는 경우, createIconSetFromIcoMoon 또는 유사한 헬퍼로 만든 아이콘을 다시 확인하세요.
- 폰트 충돌: 프로젝트에 구버전과 최신 아이콘 패키지가 혼합되어 있으면 아이콘이 ’?’ 혹은 빈 사각형으로 표시될 수 있습니다. expo doctor 명령어는 이러한 충돌을 경고합니다.
- 의존성 혼동: 일부 라이브러리는 여전히 구 패키지 이름을 기대할 수 있습니다. 대부분 문제없이 작동하지만, 예상치 못한 동작을 보인다면 의존성을 점검하세요.
EAS Build에서 현재 약 60%의 앱이 @expo/vector-icons를 사용하고 있으므로, Expo는 이 변경이 많은 프로젝트에 영향을 미친다는 것을 알고 있습니다.
그래서 Expo는 codemod를 만들었고, 전환 기간 동안 구 버전을 유지보수할 계획입니다.
이 변경은 프로젝트 복잡성을 줄이고 번들 크기를 크게 축소할 수 있습니다. 이는 Expo가 생태계를 단순화하고 성능을 향상시키려는 전반적인 노력의 일환입니다.
새 패키지는 최신 아이콘 세트와 향상된 개발 도구에 직접 접근할 수 있게 하며, 앱을 미래 대비할 수 있도록 해 줍니다. Porque Expo가 언젠가 구 버전 래퍼를 폐기할 것이기 때문입니다.
마이그레이션 중에 문제가 발생하면 Expo가 듣고 싶어합니다. 이 전환이 원활하게 진행될수록 전체 React Native 생태계에 더 좋을 것입니다.
본 포스트는 Expo 블로그 콘텐츠를 기반으로 작성되었습니다. 추가적인 React Native 콘텐츠는 @expo를 팔로우하세요.