[ React Native ] 업데이트 팝업 만들기, 버전관리

0.  팝업 만들기

2023.01.26 - [React-native] - [ React Native ] 재사용 가능 팝업 ( reusable popup ) 모달 만들기

[ React Native ] 재사용 가능 팝업 ( reusable popup ) 모달 만들기

 

저는 로그인 하기 전에 버젼 체크를 해서

스플레시 이미지가 띄워진 상태에서 업데이트 팝업을 띄우도록 하려고 합니다 :)

1. package.json 파일에서 버젼 가져오기

import packageJson from '../../package.json';
// 현재 파일 위치에 따라 경로는 상대적

const app_version = packageJson.version;	// 버젼 형태 1.0.2
const version_arr = app_version.split('.'); 	// .기준으로 버젼 숫자를 담는 배열 생성
// 결과 : [1, 0, 2]

 

2.  버젼 체크 메서드 만들기

// 버젼 체크
  const check_version = () => {
    const app_version = packageJson.version;
    const version_arr = app_version.split('.');

    console.log('app_version : ', app_version);
    
    // db에서 저장해놓은 버젼 데이터 가져오는 부분
    axios
      .get('서버 api url 주소', {})
      .then(function (response) {
      	// 데이터 형식에 따라 달라짐 
        const versionInfo = response.data[0];
        const latest_app_version = response.data[0].version;
        console.log('서버 버젼 체크', versionInfo);
        console.log('latest_app_version : ', latest_app_version);

        // 버젼이 현재 버젼이랑 다른 경우 업데이트 체크
        if (app_version !== latest_app_version) {
          Number(version_arr[0]) < Number(versionInfo.version_firstnum)
            ? show_updatePopup()
            : Number(version_arr[1]) < Number(versionInfo.version_midnum)
            ? show_updatePopup()
            : Number(version_arr[2]) < Number(versionInfo.version_lastnum)
            ? show_updatePopup()
            : goHome();
        } else {
          goHome();
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

 

3. 업데이트 팝업 띄우기

import {Linking, Platform} from 'react-native';

const popup = useRef(); 

//업데이트 팝업 띄우기
  const show_updatePopup = () => {
    popup.current.visible('업데이트가 필요합니다.', '업데이트', {
      clickEvent: go_storeLink,
    });
  };

  const go_storeLink = () => {
    const GOOGLE_PLAY_STORE_LINK = '해당 앱의 구글 스토어 url 주소';
    const APPLE_APP_STORE_LINK = '해당 앱의 appstore url 주소';
    Platform.OS === 'android'
      ? Linking.openURL(GOOGLE_PLAY_STORE_LINK)
      : Platform.OS === 'ios'
      ? Linking.openURL(APPLE_APP_STORE_LINK)
      : null;
  };

 

4. 전체 코드 흐름

흐름만 보이기 위해 생략된 부분도 있기 때문에 이부분 참고해서 필요한 부분만 가져다 사용하시면 됩니다 :)

import React, {useEffect, useRef, useState} from 'react';
import styled from 'styled-components/native';
import axios from 'axios';
import SplashScreen from 'react-native-splash-screen';
import Modal_Popup from '../Component/Modal_Popup';
import packageJson from '../../package.json';
import {Linking, Platform} from 'react-native';
... 
//// 스타일드 컴포넌트 

const Login = ({user}) => {
  ...
  const popup = useRef();

  const user_token = () => {
    ...
  };

  // 버젼 체크
  const check_version = () => {
    const app_version = packageJson.version;
    const version_arr = app_version.split('.');

    console.log('app_version : ', app_version);
    axios
      .get('서버 api url 주소', {})
      .then(function (response) {
      	// 데이터 형식에 따라 달라짐 
        const versionInfo = response.data[0];
        const latest_app_version = response.data[0].version;
        console.log('서버 버젼 체크', versionInfo);
        console.log('latest_app_version : ', latest_app_version);

        // 버젼이 현재 버젼이랑 다른 경우 업데이트 체크
        if (app_version !== latest_app_version) {
          Number(version_arr[0]) < Number(versionInfo.version_firstnum)
            ? show_updatePopup()
            : Number(version_arr[1]) < Number(versionInfo.version_midnum)
            ? show_updatePopup()
            : Number(version_arr[2]) < Number(versionInfo.version_lastnum)
            ? show_updatePopup()
            : goHome();
        } else {
          goHome();
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  // 홈으로 이동
  const goHome = () => {
    if (user === 'none_user') {
      SplashScreen.hide();	
    } else {
      user_token();	// 유저정보가 있는 경우 자동로그인 관련 함수
    }
  };

  //업데이트 팝업 띄우기
  const show_updatePopup = () => {
    popup.current.visible('업데이트가 필요합니다.', '업데이트', {
      clickEvent: go_storeLink,
    });
  };

  const go_storeLink = () => {
    const GOOGLE_PLAY_STORE_LINK = '해당 앱의 플레이스토어 url 주소';
    const APPLE_APP_STORE_LINK = '해당 앱의 앱스토어 url 주소';
    Platform.OS === 'android'
      ? Linking.openURL(GOOGLE_PLAY_STORE_LINK)
      : Platform.OS === 'ios'
      ? Linking.openURL(APPLE_APP_STORE_LINK)
      : null;
  };

  useEffect(() => {
    check_version();
  }, []);

  return (
    <Container>
      ...

      <Modal_Popup ref={popup} />		// popup을 연결해주어야 정상적으로 팝업이 나타남
    </Container>
  );
};

export default Login;