[React Native]매일 자정에 user정보 다시 받아오기

지리·2023년 6월 9일

Todo

로그인혹은 자동로그인이 되었을때 user정보 api에서 서버시간 얻기

axios request()이용

자바스크립트에서 타임존 다루기

-> 서버시간을 굳이 가져올필요는 없는듯 그냥 로컬환경 시간을 참고해서 핸드폰시간이 잘 맞기를 바라는 수밖에...^^

로컬시간을 이용해서 자정이 지나면 user정보 다시 가져와서 useContext에 저장

참고

로컬 시간 가져오기

const now = new Date();
const nextDayMidnight = new Date(now);

nextDayMidnight.setDate(now.getDate() + 1);
nextDayMidnight.setHours(0, 0, 0, 0);

const ms = nextDayMidnight.getTime() - now.getTime(); //자정까지 남은 ms

setItmeout함수

const getUser = setTimeout(async () => {
console.log('자정에 실행!');

try {
const response = await userApi(user.id);
setUser({...user, response});
} catch (e) {
console.log(e.toJSON());
}

}, ms);

hook으로 만들기

import {useEffect, useContext, useState} from 'react';
import {UserContext} from '../contexts/UserContext';
import {userApi} from '../lib/user';

function useMidnightGetUser() {
const {user, setUser} = useContext(UserContext); 

useEffect(() => {
const now = new Date();
const nextDayMidnight = new Date(now);

nextDayMidnight.setDate(now.getDate() + 1);
nextDayMidnight.setHours(0, 0, 0, 0);

const ms = nextDayMidnight.getTime() - now.getTime();

const getUser = setTimeout(async () => {
try {
const response = await userApi(user.id);
setUser({...user, response});
} catch (e) {
console.log(e.toJSON());
}
}, ms);

return () => {
clearTimeout(getUser);
};
}, [user]);
}


export default useMidnightGetUser;

-> 이 hook을 RootStack에 실행시켜줬다.

문제
위의 hook은 앱이 로딩되고 한번만 사용이 가능한것...만약 앱을 종료하지않고 백그라운드에서 켜져있을경우 함수가 실행되지 않는다...

백그라운드 실행 감지

참고
Headless JS <- 얘는 백그라운드에서도 동작하게 하는거...

const [isActive, setIsActive] = useState(true);

useEffect(() => {

const changeAppState = AppState.addEventListener('change', nextAppState => {
 nextAppState === 'active' ? setIsActive(true): setIsActive(false);
}

});
return () => changeAppState.remove();
}, []);

useMidnightGetUser(isActive);