🧠[React] react-moment, moment.js 사용하여 실시간으로 변경되는 시간

[leemember]

moment.js

• 시간이 포함된 데이터를 받아 조작해야 할 경우 많이 사용되는 편리한 라이브러리입니다.
• 시간에 따라 실시간으로 변경 되게 만드는 것이 목표라면 사용해볼만 하다.
• moment에 대한 사용 설명법은 맨 아래에 기재 예정

설치

$npm i moment

선언

import moment from 'moment';
import 'moment/locale/ko';

현재 시간

const nowTime = moment().format('YYYY-MM-DD HH:mm:ss');
console.log('현재 시간', nowTime);

이 상태라면 F5 키를 눌렀을 때만 시간이 변경된다.

setInterval 사용하여 실시간 반영하기

• 실시간으로 시간을 변경하거나, 데이터를 갱신시킬 때는 setInterval을 사용해야한다.
• 다만, 리액트 훅에서 setInterval을 사용했을 때 예상대로 작동하지 않는 문제가 발생한다.

참고 https://overreacted.io/making-setinterval-declarative-with-react-hooks/

간략 설명하면, 다소 직관적이지 않다.

  useInterval(() => {
    // Your custom logic here
    setCount(count + 1);
  }, 1000);

이것을 사용하는 것을 더 추천한다. 왜냐면, 이것과 setInterval의 차이점은 인수가 '동적'이다.

• 아무튼 이런 복합적인 이유와 성능상의 이슈 때문에 커스텀 hook을 생성하여 setInterval을 사용할 수 가 있다.

커스텀 use Hooks setInterval

// useInterval.js 작성
import { useRef, useEffect } from "react";

export default function useInterval(callback, delay) {
    const savedCallback = useRef();

    useEffect(() => {
      // useEffect에 매개변수로 받은 콜백을 현재 Ref로 선언해준다.
      savedCallback.current = callback;
    });

    useEffect(() => {
      function tick() {
        savedCallback.current();
      }
        // useEffect에 Ref의 current를 setInterval를 delay 시간동안 해준다.
      let id = setInterval(tick, delay);
      // 언마운트되기전 clearInterval을 해준다.
      return () => clearInterval(id);
    }, [delay]);
  }

또 다른 방법으로, react-use의 useInterval 사용하기

📍import { useInterval } from 'react-use';

const LiveTimeContainer = () => {
  const [realTime, setRealTime] = useState(Date.now());

  // useInterval
  📍useInterval(() => {
    setRealTime(Date.now());
  }, 1000);

  return <div>{seconds}</div>
}

참고 https://haranglog.tistory.com/10