[RN] react-native-version-check 이해하고 활용하기 : App 버전, Google PlayStore 버전 정보
목차
반응형
해당 글에서는 react-native-version-check 라이브러리를 활용하여 App 버전과 Google PlayStore 내에 등록된 버전을 비교하여 앱 업데이트를 하는 방법에 대해 알아봅니다.
1) react-native-version-check
💡 react-native-version-check
- React Native 앱의 버전을 확인하고 업데이트를 관리하는 데 도움이 되는 라이브러리입니다. - 이를 사용하면 현재 앱의 버전 정보를 불러오거나, 앱 스토어에 새로운 버전이 출시되었는지 확인하는 등의 기능을 사용할 수 있습니다. - 또한 사용자가 앱을 최신 상태로 유지하도록 권장하는 메시지를 보여주는 기능도 제공합니다. 이 라이브러리는 Android와 iOS 모두에서 사용할 수 있습니다.
1. 주요 메서드
💡 주요 메서드
- react-native-version-check 라이브러리에서 제공해 주는 주요 메서드에 대해 알아봅니다.
메서드 명
반환 값
설명
getCountry()
Promise<country: String>
디바이스의 국가 코드를 반환
getPackageName()
packageName: String
앱의 패키지 이름을 반환
getCurrentBuildNumber()
buildNumber: Number
현재 앱 빌드 번호를 반환
getStoreUrl([option: Object])
Promise<storeUrl: String>
Play Market 또는 App Store의 앱 URL을 반환
getAppStoreUrl([option: Object])
Promise<storeUrl: String>
App Store의 앱 URL을 반환
getPlayStoreUrl([option: Object])
Promise<storeUrl: String>
Play Store의 앱 URL을 반환
getCurrentVersion()
currentVersion: String
현재 앱 버전을 반환
getLatestVersion([option: Object])
Promise<latestVersion: String>
App Store 혹은 Play Store의 추가된 버전을 반환
needUpdate([option: Object])
Promise<result: Object>
업데이트 필요 여부를 포함한 객체를 반환. 현재 버전과 최신 버전이 첫 번째 구분자로 분할되고, 각 분할 된 숫자를 깊이까지 확인
pod 'react-native-version-check', :path => '../node_modules/react-native-version-check'
2.2. Android 설정
1. android/settings.gradle
💡 android/settings.gradle
- android/settings.gradle 파일 내에 추가해 줍니다.
include ':react-native-version-check'
project(':react-native-version-check').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-version-check/android')
💡 android/app/src/main/java/[...]/MainApplication.java - MainApplication.java 파일 내에 추가해 줍니다.
......
import io.xogus.reactnative.versioncheck.RNVersionCheckPackage; // <--- HERE
......
@Override
protected List<ReactPackage> getPackages() {
......
new RNVersionCheckPackage() // <------ HERE
......
}
3) 활용하기
1. android/app/build.gradle 내에 지정한 정보 조회
💡 android/app/build.gradle 내에 지정한 정보 조회
- build.gradle 파일 내에 존재하는 패키지명, 앱 빌드 번호, 앱 버전을 가져옵니다.
메서드 명
반환 값
설명
getLatestVersion([option: Object])
Promise<latestVersion: String>
URL에서 파싱한 최신 앱 버전을 반환. 파싱 오류 시 null 반환
const confirmVersion = async () => {
console.log("디바이스 국가 코드 : ", await VersionCheck.getCountry()); // KR
console.log("디바이스 패키지 명 : ", VersionCheck.getPackageName()); // com.xxxx
console.log("디바이스 앱 빌드 번호 : ", VersionCheck.getCurrentBuildNumber()); // 7
console.log("앱 버전", VersionCheck.getCurrentVersion()); // 2.0.0
}
2. Google PlayStore, App Store 내의 버전 정보 조회
💡 Google PlayStore, App Store 내의 버전 정보 조회
- Google PlayStore, App Store 내에 등록된 버전을 가져옵니다. 등록이 되지 않았다면 undefined 값을 반환합니다.
메서드 명
반환 값
설명
getLatestVersion([option: Object])
Promise<latestVersion: String>
App Store 혹은 Play Store의 추가된 버전을 반환
💡 getLatestVersion의 메서드의 파라미터 속성입니다.
속성
속성 값 타입
기본값
설명
forceUpdate
boolean
false
앱의 최신 버전을 강제로 업데이트할지 결정합니다.
provider
string or function
'appStore' or 'playStore' (depending on the platform)
앱의 최신 버전을 조회할 방법을 지정합니다. 'appStore' 또는 'playStore'를 선택하거나, 사용자 정의 함수를 제공할 수 있습니다.
fetchOptions
object
{}
사용자 정의 API를 호출할 때 사용되는 fetch 옵션을 지정합니다.
ignoreErrors
boolean
false
에러를 무시할지 여부를 결정합니다. true로 설정하면, 에러가 발생해도 프로그램 실행이 중단되지 않습니다.
const confirmVersion2 = async () => {
VersionCheck.getLatestVersion()
.then((latestVersion) => {
console.log("앱 최신 버전 조회 : ", latestVersion); // 2.0.0
});
VersionCheck.getLatestVersion({
provider: 'appStore' // for iOS
})
.then((latestVersion) => {
console.log("App Store(iOS)내의 최신 버전 조회 : ", latestVersion); // undefined
});
VersionCheck.getLatestVersion({
provider: 'playStore' // for Android
})
.then((latestVersion) => {
console.log("Google Playstore(Android)내의 최신 버전 조회 : ", latestVersion); // 2.0.0
});
}
[ 더 알아보기 ] 💡 getLatestVersion 메서드에서 provider 값을 추가하지 않으면 어떤 값을 반환할까?
- 현재 앱이 실행되어 있는 플랫폼(iOS/Andriod)을 기준으로 등록된 버전을 반환해 줍니다.
💡 앱의 최신 버전을 조회하는 데 사용되며 forceUpdate와 provider 두 가지 파라미터를 사용하고 있습니다
- forceUpdate는 강제 업데이트를 할지 결정하는 파라미터입니다. 이 값을 true로 설정하면, 앱의 최신 버전이 조회되면서 동시에 업데이트가 강제로 진행됩니다.
- provider는 앱의 최신 버전을 조회할 방법을 지정하는 파라미터입니다. 여기서는 사용자 정의 함수를 제공하여 최신 버전을 조회하게 되는데, 특히 'http://your.own/api' 주소에서 JSON 형식의 데이터를 가져와서 그중에서 version 값을 반환하도록 되어 있습니다. 이 함수는 앱의 최신 버전 정보가 저장된 고유 API에서 정보를 가져오는 데 사용됩니다.
VersionCheck.getLatestVersion({
forceUpdate: true,
provider: () => fetch('<http://your.own/api>')
.then(r => r.json())
.then(({ version }) => version), // You can get latest version from your own api.
})
.then(latestVersion => {
console.log(latestVersion);
});
3. 업데이트 여부 확인
💡 업데이트 여부 확인
- 현재 설치된 앱이 업데이트가 필요한지 여부를 반환해주는 needUpdate() 메서드에 대해 알아봅니다.
메서드 명
결과 값
설명
needUpdate([option: Object])
Promise<result: Object>
업데이트 필요 여부를 포함한 객체를 반환. 현재 버전과 최신 버전이 첫 번째 구분자로 분할되고, 각 분할 된 숫자를 깊이까지 확인
💡 needUpdate의 메서드의 파라미터 속성입니다.
속성
속성 타입
기본값
설명
currentVersion
string
현재 앱 버전
앱의 현재 버전을 지정합니다.
latestVersion
string
최신 앱 버전
앱의 최신 버전을 지정합니다.
depth
number
1
버전 비교의 깊이를 지정합니다. 기본값은 1입니다.
forceUpdate
boolean
false
강제 업데이트를 할지 결정합니다. 기본값은 false입니다.
provider
string or function
'appStore' or 'playStore' (플랫폼에 따라 다름)
앱의 최신 버전을 조회할 방법을 지정합니다. 'appStore' 또는 'playStore'를 선택하거나, 사용자 정의 함수를 제공할 수 있습니다.
fetchOptions
object
{}
사용자 정의 API를 호출할 때 사용되는 fetch 옵션을 지정합니다. 기본값은 빈 객체입니다.
ignoreErrors
boolean
false
에러를 무시할지 여부를 결정합니다. 기본값은 false로, 이를 true로 설정하면 에러가 발생해도 프로그램 실행이 중단되지 않습니다.
[ 더 알아보기 ] 💡 depth 속성값은 시멘틱 버저닝 기준으로 값은 무엇을 의미하는가?
- 시멘틱 버저닝의 기준은 메이저.마이너.패치 버전으로 구성되어 있습니다.
- depth 값이 1이면 메이저 버전만 비교합니다. 현재 버전이 2.0.0이고, 앱 스토어의 버전이 3.0.0일 때, 업데이트가 필요하다고 판단합니다. - depth 값이 2이면 마이너 버전만 비교합니다. 현재 버전이 2.1.0이고, 앱 스토어의 버전이 2.2.0일 때, 업데이트가 필요하다고 판단합니다. - depth 값이 3이면 패치 버전만 비교합니다. 현재 버전이 2.1.0이고, 앱 스토어의 버전이 2.2.1일 때, 업데이트가 필요하다고 판단합니다.
1. 업데이트 여부가 필요한지 확인하여, 필요시 Linking.openURL를 통해 플랫폼(iOS, Andriod) 별 페이지를 출력합니다.
2. 업데이트 여부가 필요한지 확인하여, 조건은 시멘틱 버저닝 중 '마이너 버전'이 맞지 않을 경우 true 값을 반환합니다.
3. 업데이트 여부가 필요한지 확인하여, 현재 버전(1.0)과 최신 버전(2.0)을 지정하였습니다. 이 경우 최신버전이 현재 버전보다 높기에 true 값을 반환합니다.
4. 업데이트 여부가 필요한지 확인하여, 현재 버전(2.1)과 최신 버전(2.0)을 지정하고 '메이저 버전'에 대한 비교를 합니다. 이 경우 현재 버전이 최신 버전과 비교하여 높거나 같기에 false 값을 반환합니다.
const confirmVersion3 = async () => {
// 1. 업데이트 여부가 필요한지 확인하여, 필요 시 Linking.openURL를 통해 플랫폼(iOS, Andriod) 별 페이지를 출력합니다.
VersionCheck.needUpdate()
.then(async (res) => {
console.log("업데이트 필요 여부 ::", res.isNeeded); // true
if (res.isNeeded) {
Linking.openURL(res.storeUrl); // 플랫폼(iOS, Andriod) 별 페이지를 출력합니다.
}
});
// 2. 업데이트 여부가 필요한지 확인하여, 조건은 시멘틱 버저닝 중 '마이너 버전'이 맞지 않을 경우 true 값을 반환합니다.
VersionCheck.needUpdate({
depth: 2
}).then(res => {
console.log(res.isNeeded);
});
// 3. 업데이트 여부가 필요한지 확인하여, 현재 버전(1.0)과 최신 버전(2.0)을 지정하였습니다. 이 경우 최신버전이 현재 버전보다 높기에 true 값을 반환합니다.
VersionCheck.needUpdate({
currentVersion: "1.0",
latestVersion: "2.0"
}).then(res => {
console.log(res.isNeeded); // true
});
// 4. 업데이트 여부가 필요한지 확인하여, 현재 버전(2.1)과 최신 버전(2.0)을 지정하고 '메이저 버전'에 대한 비교를 합니다. 이 경우 현재 버전이 최신 버전과 비교하여 높거나 같기에 false 값을 반환합니다.
VersionCheck.needUpdate({
depth: 1,
currentVersion: "2.1",
latestVersion: "2.0",
}).then(res => {
console.log(res.isNeeded); // false
});
}
4) 참고
1. 앱 시작 시, Google PlayStore 버전과 현재 설치된 버전을 확인 함수
💡 앱 시작 시, Google PlayStore 버전과 현재 설치된 버전을 확인 함수
- 앱 시작 시, 현재 버전과 Google PlayStore 버전을 비교하여 시멘틱 버저닝 중 ‘마이너 버전’이 변경되었을 경우 업데이트를 위한 팝업이 출력되는 함수입니다.
/**
* 앱 시작 시, Google PlayStore 버전과 현재 설치된 버전을 확인합니다.
* X.X.0 버전이 변경된 경우만 수행합니다(Major/Minor 버전 변경)
* @return {Promise<void>}
*/
const checkAppVersion = async (): Promise<void> => {
let currentVersion = VersionCheck.getCurrentVersion(); // 현재 앱의 버전을 가져옵니다.
// 구글 플레이 스토어의 최신 버전을 가져옵니다.
await VersionCheck.getLatestVersion({ provider: 'playStore' })
.then((latestVersion: string) => {
console.log("[+] 앱 현재 버전 : [", currentVersion, "] // Google PlayStore 버전 : [ " + latestVersion, "]");
// 구글 플레이 스토어와 비교하여 시멘틱 버저닝 중 '마이너 버전'에 대해 비교하여 필요하다면 팝업을 띄어줍니다.
VersionCheck.needUpdate({
provider: 'playStore', // 구글 플레이 스토어의 최신 버전을 가져옵니다.
depth: 2 // 시멘틱 버저닝 중 '마이너 버전'에 대해서 확인합니다.
})
.then(async (res) => {
if (res.isNeeded) {
console.log("[+] 앱의 버전 업데이트가 필요합니다.")
setUpdatePopupVisible(true); // 마이너 버전이 변경에 따른 팝업 출력
}
});
});
}
2. 팝업 내 ‘업데이트’ 버튼을 눌렀을 경우 Google PlayStore로 이동 함수
💡 팝업 내 ‘업데이트’ 버튼을 눌렀을 경우 Google PlayStore로 이동 함수
- 팝업이 출력되고 ‘업데이트’ 버튼을 눌렀을 경우 Google PlayStore로 바로 페이지를 띄어주는 함수입니다.
/**
* 앱 업데이트 버튼을 눌렀을 경우 Google PlayStore로 이동합니다.
* @return {Promise<void>}
*/
const updateAppPop = async (): Promise<void> => {
await VersionCheck.needUpdate({
provider: 'playStore' // 구글 플레이 스토어의 최신 버전을 가져옵니다.
})
.then(async (res) => {
Linking.openURL(res.storeUrl); // open store if update is needed.
});
}
