Skip to main content

라이브러리 사용하기

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

패키지 매니저 선택하기​

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

컴퓨터에 Node.js가 설치되어 있다면 npm CLI도 함께 설치된다. 일부 개발자는 Yarn Classic을 선호한다. Yarn은 설치 속도가 약간 더 빠르고 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에서 원하는 라이브러리를 찾지 못했다면, 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과 같이 입력하면 된다.