Skip to main content
Version: Next

라이브러리 사용하기

React Native는 앱에서 바로 사용할 수 있는 코어 컴포넌트와 API를 제공한다. React Native에 포함된 컴포넌트와 API에만 제한되지 않는다. React Native는 수천 명의 개발자로 구성된 커뮤니티를 가지고 있다. 코어 컴포넌트와 API에서 원하는 기능을 찾을 수 없다면, 커뮤니티에서 라이브러리를 찾아 설치하여 앱에 필요한 기능을 추가할 수 있다.

패키지 매니저 선택하기​

React Native 라이브러리는 일반적으로 npm 레지스트리에서 npm CLI나 Yarn Classic 같은 Node.js 패키지 매니저를 통해 설치한다.

컴퓨터에 Node.js가 설치되어 있다면 npm CLI도 함께 설치된다. 일부 개발자는 Yarn Classic을 선호하는데, 설치 속도가 약간 더 빠르고 Workspaces 같은 고급 기능을 제공하기 때문이다. 두 도구 모두 React Native와 잘 동작한다. 설명의 간결성을 위해 이 가이드에서는 npm을 기준으로 진행한다.

💡 자바스크립트 커뮤니티에서는 "라이브러리"와 "패키지"라는 용어를 서로 바꿔서 사용한다.

라이브러리 설치하기​

프로젝트에 라이브러리를 설치하려면, 터미널에서 프로젝트 디렉토리로 이동한 후 설치 명령어를 실행한다. react-native-webview를 예로 들어 보자:

shell
npm install react-native-webview

설치한 라이브러리에는 네이티브 코드가 포함되어 있어, 사용하기 전에 앱과 연결해야 한다.

iOS에서 네이티브 코드 연결하기​

React Native는 iOS 프로젝트의 의존성을 관리하기 위해 CocoaPods를 사용한다. 대부분의 React Native 라이브러리도 이 방식을 따른다. 사용 중인 라이브러리가 다른 방식을 사용한다면 해당 라이브러리의 README를 참고해 추가 지침을 확인해야 한다. 대부분의 경우 아래 설명이 적용된다.

네이티브 iOS 프로젝트에 연결하려면 ios 디렉터리에서 pod install을 실행한다. ios 디렉터리로 이동하지 않고도 npx pod-install을 실행해 같은 작업을 수행할 수 있다.

bash
npx pod-install

이 작업이 완료되면 앱 바이너리를 다시 빌드해 새로운 라이브러리를 사용할 수 있다.

shell
npm run ios

안드로이드 네이티브 코드 연결하기​

React Native는 안드로이드 프로젝트의 의존성을 관리하기 위해 Gradle을 사용한다. 네이티브 의존성이 있는 라이브러리를 설치한 후, 새로운 라이브러리를 사용하려면 앱 바이너리를 다시 빌드해야 한다:

shell
npm run android

라이브러리 찾기​

React Native Directory는 React Native 전용으로 제작된 라이브러리를 검색할 수 있는 데이터베이스다. React Native 앱에 필요한 라이브러리를 찾을 때 가장 먼저 확인해야 할 곳이다.

이 디렉토리에서 찾을 수 있는 많은 라이브러리는 React Native Community나 Expo에서 제공한다.

React Native Community에서 만든 라이브러리는 React Native에 의존하는 회사나 개인 자원봉사자들이 주도한다. 이 라이브러리들은 iOS, tvOS, Android, Windows를 지원하지만, 프로젝트마다 지원 범위가 다를 수 있다. 이 조직의 많은 라이브러리는 원래 React Native 코어 컴포넌트와 API였다.

Expo에서 만든 라이브러리는 모두 TypeScript로 작성되었으며, 가능한 한 iOS, Android, react-native-web을 지원한다.

React Native Directory에서 React Native 전용 라이브러리를 찾지 못했다면, 다음으로 npm 레지스트리를 확인하는 것이 좋다. npm 레지스트리는 JavaScript 라이브러리의 주요 소스이지만, 여기에 등록된 모든 라이브러리가 React Native와 호환되지는 않는다. React Native는 Node.js, 웹 브라우저, Electron 등 다양한 JavaScript 프로그래밍 환경 중 하나이며, npm에는 이러한 모든 환경에서 작동하는 라이브러리가 포함되어 있다.

라이브러리 호환성 확인하기​

React Native에서 작동하는가?​

일반적으로 다른 플랫폼을 위해 특별히 제작된 라이브러리는 React Native에서 작동하지 않는다. 예를 들어, react-select는 웹을 위해 만들어졌으며 react-dom을 대상으로 한다. rimraf는 Node.js용으로 제작되었으며 컴퓨터 파일 시스템과 상호작용한다. 반면 lodash와 같은 라이브러리는 순수 JavaScript 언어 기능만 사용하므로 어떤 환경에서도 작동한다. 시간이 지나면 이 차이를 자연스럽게 이해하게 되겠지만, 그 전까지는 직접 시도해 보는 것이 가장 간단한 방법이다. 만약 React Native에서 작동하지 않는다면 npm uninstall을 사용해 패키지를 제거할 수 있다.

내 앱이 지원하는 플랫폼에서 작동할까?​

React Native Directory에서 iOS, Android, Web, Windows와 같은 플랫폼 호환성을 기준으로 필터링할 수 있다. 사용하려는 라이브러리가 현재 목록에 없다면, 해당 라이브러리의 README를 참고해 더 자세한 정보를 확인할 수 있다.

내 React Native 앱 버전과 호환되나요?​

라이브러리의 최신 버전은 일반적으로 React Native의 최신 버전과 호환된다. 이전 버전을 사용 중이라면 README 파일을 참고해 설치해야 할 라이브러리 버전을 확인해야 한다. 특정 버전의 라이브러리를 설치하려면 npm install <library-name>@<version-number> 명령을 실행하면 된다. 예를 들어 npm install @react-native-community/netinfo@^2.0.0과 같이 입력하면 된다.