[React Native] AppState

앱을 사용하다보면 앱을 모바일 하단 가운대 버튼을 누르거나 위로 올려서 background에 두고 다른 앱을 사용하는 경우가 있다.

이 경우 앱의 데이터에 변화가 있었더라도 다시 돌아왔을땐 그대로의 상태로 있을것이다. 만약 어떠한 스토어에서 결제 내역 화면에 갔다가 잠시 다른 앱을 사용하고 있는 도중 판매자가 물건을 배송 했다면 문제가 생길수 있다.

예를들면 실제 물건은 배송중 이지만 사용자의 화면엔 아직 배송중 상태로 넘어가지 않아 여전히 자동 취소가 가능한 상황이 생길수도 있다.

이런 문제는 Websocket을 사용한다면 해결이 되긴 하지만 스토어의 규모가 그렇게 크진 않고 시간적 여유가 부족하다면 AppState를 사용해여 해결할수 있다.

import {AppState} from 'react-native';

우선 React Native에서 AppState를 import시킨다.

  useEffect(() => {
    const listener = AppState.addEventListener('change', handleChange);
    return () => {
      listener.remove();
    };
  }, []);
  
  const handleChange = (newState: AppStateStatus) => {
    if (newState === 'active') {
      functionYouWannaReload()
    }
  };

그리고 위 코드와 같이 useEffect안에 addEventListener를 사용하여 change가 있을 때마다 handleChange를 호출하는 코드를 작성한다 그리고 listener.remove()를 통해 데이터 누수를 방지해준다.
handleChange를 보면 유저가 모바일에서 앱으로 다시 돌아오는 AppState의 상태인 active 일때 Reload하고싶은 데이터를 호출하도록 작성해준다.

간단하게 완료!
꾸준한 개발자가 되도록 하겠다!