React Native의 의존성 이해

React Native는 외부 라이브러리 또는 모듈로, 프로젝트가 기능, 간소화된 개발, 성능 향상을 위해 의존합니다. React Native에서는, 의존성들은 일반적으로 npm 또는 Yarn을 통해 관리됩니다. 라이브러리 설치, 업데이트, 버전 제어 및 때때로 기본 코드 링크 기능을 처리하는 JavaScript 패키지 관리자. 표준 웹 앱과 달리 React Native 프로젝트는 기본 의존성(iOS CocoaPods, Android Gradle file)과 함께 묶음 JavaScript 의존성(iOS CocoaPods, Android Gradle file)과 같은 일반적인 의존성 관리가 더 많은 수치를 갖는 것을 의미합니다.

종업원은 두 가지 범주로 떨어졌다:

  • JavaScript Dependencies – 순수 JS 라이브러리(예: ]], ) 어떤 기본 구성 없이 작업.
  • Native Dependencies – 기본 코드(예: ], ])에 브리징을 요구하는 라이브러리. 이 경우 또는 수동 Gradle 변경 사항이 필요합니다.

React Native documentation은 프로젝트와 기본 의존성 트리를 초기화하는 세부 정보를 제공합니다.

설치 의존

React Native 프로젝트에 새로운 라이브러리를 추가하려면 패키지 관리자의 설치 명령을 사용하십시오. 예를 들어, ]react-navigation]를 설치하려면 다음을 실행하십시오.

npm install @react-navigation/native @react-navigation/stack

또는 털실과:

yarn add @react-navigation/native @react-navigation/stack

설치 후, 일부 라이브러리는 기본 코드의 링크를 필요로합니다. React Native 0.60+에서 자동 연결은 가장 기본 의존성을 자동으로 처리합니다. 그러나 특정 라이브러리 (특히 사용자 정의 기본 레이아웃 또는 타사 SDK와 함께)는 수동 단계가 필요합니다.

  • iOS의 경우: 또는 ] CocoaPods pods를 설치하기 위해 실행합니다.
  • Android: 라이브러리의 는 자동으로 합병되지만, 라이브러리의 React 패키지가 자동 등록되지 않은 경우 저장소를 추가하거나 ]를 수정해야 할 수도 있습니다.

항상 라이브러리의 설치 가이드를 확인합니다 - 많은 인기있는 라이브러리 포스트 ‐ 런타임 충돌을 방지하기 위해 단계 설치.

npx react-native 링크를 사용하여 (Legacy)

React Native <0.60을 사용하는 프로젝트에는 ]와 함께 네이티브 의존성을 수동으로 연결해야 합니다. 이 명령은 Podfile 및/또는 를 수정합니다. 레거시 프로젝트를 유지한다면, 로 자동 연결에 마이그레이션을 고려하십시오.

저축 종점

기본적으로 npm 및 원사들은 package.json] 파일에 설치 패키지를 저장합니다. 또는 섹션. 이 모든 종속성 및 버전 범위의 트랙을 유지하고 다른 개발자 또는 배포 환경은 단일 명령 ( 또는 )과 같은 패키지를 설치할 수 있습니다.

명시적으로 dev 의존도로 표시하지 않고 패키지를 설치하면 ]]에서 저장됩니다. 개발 중에만 사용되는 도구 (예 : ], ], ]), 사용 :

npm install --save-dev package-name
yarn add --dev package-name

runtime과 dev Dependencies 사이의 명확한 분리를 유지하고 생산에 번들 크기를 감소시키고 앱 스토어 아카이브에서 빌드 타임 유틸리티의 실수를 방지합니다.

Dependency 버전 관리

package.json에서 정확한 버전을 지정하면 업데이트가 발생한 예상치 못한 문제를 방지할 수 있습니다. 업데이트 제어를 위해 semantic versioning(semver)를 사용할 수 있습니다.

  • - 1.0.0 이상 어떤 미성년자 또는 패치 버전을 허용하지만 1.1.0, 1.2.5)하지만 2.0.0.
  • - 1.0.0 (예 : 1.0.1, 1.0.9) 이상의 패치 버전을 허용하지만 1.1.0이 아닌.
  • – 정확히 버전 1.0.0 (업데이트 없음)에 핀으로 꼿습니다.

생산 앱의 경우, 정확한 버전 (예를 들어, ])에 직접 의존도를 핀으로 배포 중에 실수로 변경을 방지합니다. 잠금 파일 (] 또는 ]])를 사용하여 모든 설치가 동일한 나무를 생산합니다.

버전 Conflicts 해결

두 개의 라이브러리가 동일한 패키지의 다른 버전을 필요로 할 때, 당신은 피어 의존성 경고 또는 실행 시간 오류를 발생할 수 있습니다. 충돌을 해결하는 도구 :

  • npm ls 패키지 이름 – 의존성 나무와 강조 표시 중복.
  • ]yarn 왜 패키지 이름 – 패키지가 설치되는 이유를 설명합니다.
  • npm dedupe / ]yarn-deduplicate - 가능한 한 플랫텐 중복 패키지.

React Native의 경우 ], ], 또는 ]와 같은 기본 모듈을 비난하는 버전에 대한 추가주의를 기울여야 합니다. Inconsistent 버전은 “Native module not be found”와 같은 암호화 오류를 일으킬 수 있습니다.

공급 능력

일반적으로 업데이트 된 의존성은 보안, 성능 및 새로운 기능에 대한 액세스에 필수적입니다. 다음 접근 방식을 사용하십시오.

  • Minor/Patch 업데이트: ] 또는 ]] – 비발적 변화에 대한 안전.
  • Major 업데이트: 수동 ]]에서 버전을 범프하고 ]을 실행합니다. 라이브러리의 변경 로그를 검토하여 API 변경을 깨는 것입니다.
  • Interactive upgrade: ] (따로 설치) 패키지가 최신 버전이 있는 것을 볼 수 있도록, 그 다음 선택적으로 업데이트.

Core React Native 자체(] 패키지를 업데이트하면, 항상 공식 ]React Native Upgrade guide를 따르고 를 사용하여 프로젝트의 템플릿 파일로 변경할 수 있습니다. iOS 및 Android 시뮬레이터와 실제 장치 모두에서 완전히 테스트하십시오.

자동 업데이트 CI/CD

연속 통합 파이프라인에서 ] 또는 ]을 실행하는 작업을 설정하여 미성년자 업데이트를위한 풀 요청을 생성하고 전체 테스트 스위트를 트리거합니다. 이것은 안정적인 환경을 유지하면서 신뢰성 썩을 방지합니다.

사용되지 않는 종속

라이브러리가 더 이상 사용되지 않을 때 번들 크기를 줄이고 유지 보수를 단순화하십시오.

npm uninstall library-name
yarn remove library-name

사용하지 않은 패키지는 ]]에서 제거 후 제거 후 그들은 정전을 겪을 수 있습니다. 또는 를 실행하여 여분의 패키지를 삭제합니다. 더 철저한 정리를 위해, 고려하십시오:

  • depcheck – 코드를 기반으로 사용하지 않는 의존성을 식별하는 도구.
  • npx react-native unlink library-name (legacy) - 어떤 기본 링크가 있는지 제거한다.

Dependency Management에 대한 모범 사례

  • Regularly review and update Dependencies. 월간 일정 “수용 감사” – 보안 자문을 위한 확인(]), 최신 안정된 버전으로 업데이트, 그리고 사용되지 않은 패키지를 정리합니다.
  • 최소 요구 사항에 대한 Keep 의존성. 피 “kitchen 싱크” 라이브러리; 초점, 잘 유지 된 대안을 선택 (예를 들어, 전체 UI 키트를 가져 대신 아이콘에).
  • ] 업데이트 제어를 위해 semantic versioning을 사용합니다. Pin 주요 버전과 재현성을 위한 잠금 파일에 의존합니다.
  • ]정렬을 새롭게 한 후 완전히 테스트합니다.] 실행 단위 테스트, 통합 테스트 및 두 플랫폼에서 수동 UI 테스트. 기본 모듈 동작을 변경하는 데 주의하십시오.
  • 클립 및 잠금 파일.]]에서 비소를 소개할 수 있는 수동 편집을 방지합니다. 또는 를 버전 제어하여 환경 전체에 동일한 설치를 보장합니다.
  • npm에 대한 예비 실은 세례적인 설치 및 작업 공간이 필요한 경우.] 원사 베리 (v2+)는 플러그인을 가속화 할 수 있지만 React Native와 호환 체크가 필요할 수 있습니다.
  • ] 를 사용하여 벌레잡기 전에 일반적인 의존성 및 환경 문제를 진단합니다.

CocoaPods 및 Gradle과 Native Dependencies 처리

iOS의 경우 항상 ]을 실행하여 기본 파드의 버전을 잠금 해제합니다. ]를 실행하면 React Native 라이브러리를 업그레이드하여 최신 호환 파드 버전을 얻을 수 있습니다. Android의 경우 ]가 충돌하지 않는 것을 보장 ] 또는 ] 라이브러리의 값.

React Native를 사용한 monorepos 사용하기

프로젝트가 모노레포(예: Nx, Turborepo, Lerna)를 사용한다면, 워크스페이스와 루트 레벨에 의존성을 관리합니다. 호라이딩에 주의해야 합니다. 일부 React Native 라이브러리는 ] 옵션을 필요로 하며, 정전이 발생할 수 있습니다.

일반적인 Pitfalls 및 Them을 방지하는 방법

  • " npm install:] Delete , ], 신선한 설치를 실행할 수 없습니다. 원사 사용 시 뿐만 아니라 (하지만 잠금 파일로 신중하게).
  • iOS 빌드는 라이브러리를 추가한 후 실패합니다: ]] 그리고 라이브러리의 podfile이 올바르게 참조되는 것을 확인 합니다. Xcode 빌드 로그를 확인 “library not found” 오류.
  • ]Android runtime crash due to missing native module: 라이브러리의 Android 패키지가 자동등록되었거나 수동으로 ]] ]]에 추가됨.
  • Duplicate Symbol or method crashs: 를 사용하며, 라이브러리 중 하나 또는 업그레이드하여 기본 코드를 해결합니다.

외부 자료

효과적인 의존성 관리는 React Native 프로젝트 보안, 효율적이고 유지적인 작업을 계속할 수 있습니다. 이러한 관행이 개발된 후, 기존 또는 호환되는 라이브러리에 의해 발생되는 잠재적인 문제를 줄이고, 의존도 지옥보다 건물 기능에 집중할 수 있도록 팀에게 도움을 줍니다.