React Native 시간 알람

안녕하세요.
새로운 서비스를 기획하다가 이런 기능을 하고 싶은데 어떻게 구현되야할지 감이 잡히지 않아 질문 올립니다.

RN으로 만든 App을 사용 중 00:00 시 그러니까 하루가 지난 시점이 되면 redux를 초기화하던가 서버에서 데이터를 새로 받아오는 로직을 생각중입니다.

00:00시로 넘어가는 시점을 어떻게 파악할 수 있을까요??

AsyncStorage 에 마지막 가져온 시간을 저장하고, 현재 시간과 비교해서 00:00시가 지났는지 비교하는 게 간단할 것 같아요.

좋아요 1

@choipd 님의 방법이 간단하고 좋은거 같습니다.
시간에 따라 중요한 로직이 들어간다면 서버처리를 해야하고요. 폰에서는 시간 조작을 할 수 있어요.

좋아요 2

아아, 정확하게 00:00 은 알 수 없지만
storage에 마지막 가져온 시간을 저장해두고
페이지 이동시에 체크해 주로록 Route 에서 확인 할 수 있는 방법으로 찾아봐야 겠네요.

저번 글에도 답변 달아주셨는데 감사합니다~!

좋아요 1

로컬 타임으로 00:00시로 넘어갈때 어떤 일을 하고 싶은 상황이라면 useEffect가 적절해보입니다.

useEffect(()=>{
  // 내일 00시까지 남은 ms 계산
  const now = new Date();
  const nextDayMidNight = new Date(now);
  nextDayMidNight.setDate(now.getDate()+1);
  nextDayMidNight.setHours(0,0,0,0);
  const remainTime = nextDayMidNight - now; 

  const id = setTimeout(()=>{
    // do something
  }, remainTime);

  return () => clearTimeout(id);
},[]);

커스텀 hook으로 만든다면 이런건 이런 식으로 해 놓으면 재사용이 쉽겠죠? :smiley:

const useMidNightEffect = (callback)=>{
  useEffect(()=>{
    // 내일 00시까지 남은 ms 계산
    const now = new Date();
    const nextDayMidNight = new Date(now);
    nextDayMidNight.setDate(now.getDate()+1);
    nextDayMidNight.setHours(0,0,0,0);
    const remainTime = nextDayMidNight - now; 
  
    const id = setTimeout(()=>{
      // do something
      callback();
    }, remainTime);
  
    return () => clearTimeout(id);
  },[]);
}

실제 실행해서 동작 테스트는 해보지 않았습니다. 문제가 있다면 알려주세요.

그러고 보니 계속 앱을 사용중인 경우 모레 00시는 안되겠네요. ㅎㅎㅎ 반복적인걸 원한다면 수정을 조금 하면 되겠죠?

제 경험상 웹브라우저에서 몇시간짜리 setTimeout 은 작동이 불안정했습니다.
예전에 제가 accessToken/refreshToken을 만료되기 전에 refresh 해주는 로직을 setTimeout이 들어간 훅으로 써본적이 있는데, 브라우저 탭을 켜둔 채로 놔둬도 한시간이 넘어가는 setTimeout은 확실하게 동작한다고 보장하기 힘들었습니다.
적당한 간격으로 시각을 폴링하고, 원하는 이벤트가 발생했을때 useEffect가 실행되게 하는 방법이 더 안정적일거라고 생각합니다.

“작동이 불안정” 하다는 게 어떤 건지 알려주실 수 있나요? 자바스크립트 특성상 타이머가 정확한 시간을 보장하지 않는 점 말고 setTimeout의 delay가 몇 시간짜리일 경우 브라우저에서는 그 실행 시간이 더 보장되지 않는 말씀이신가요?

setTimeout 의 콜백인자가 실행이 될 수도 있고 안 될 수도 있다는 의미입니다.
아마 실행이 제대로 된다면 정확한 시간에 실행되긴 하겠죠. 실행 시간이 보장되지 않는다기 보다는 실행 여부가 보장이 안됩니다.

@ccld44 답변 감사합니다. :smiley: 혹시 그런 문제를 겪으셨던 브라우저도 알려주실수 있나요? 관련해서 참고할 만한 내용은 없는지 궁금해서 검색해보려는데 겪으셨던 브라우저 알려주시면 검색하는데 도움이 될것 같습니다.

파이어폭스에서 테스트 했습니다. 저도 정확한 이유는 모르지만, 의심가는 부분은 오랫동안 행동이 없는 탭의 자바스크립트 엔진이 전력 소모 / cpu 사용량 관리를 위해 이벤트루프를 멈추는 경우가 있는 것 같습니다.

좋아요 1

답변 감사합니다. 파이어 폭스 관련해서 찾아보니 관련 글이 있었습니다. firefox 최신버전에서는 어떤지 등 더 자세한 내용은 더 들여다 봐야 알겠지만 덕분에 이런게 있다는 걸 알았습니다.

그런데 단순히 pause했다가 resume하는 거면 재시간이 아니더라도 00시가 넘었으면 callback이 실행 될테고, 완전히 page reload이면 새로운 hook이 설정될테니 00시까지의 setTimeout을 써도 써도 상관 없을 것으로 판단됩니다.

좋아요 1