[React] moment.js 실시간 표시 하기

1. useInterval.js 작성

=> hooks 로 만들어줌

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]);
}

 

 

2. 컴포넌트 안에서 사용 

import useInterval from "../hooks/useInterval";

const ExComponent = () => {
   ....
   const [counter, setCounter] = useState(0);
   useInterval(() => setCounter(counter + 1), 1000);
}

 

 

 

https://haranglog.tistory.com/10

[React] 리액트에서 react-moment, moment.js 사용하여 실시간으로 변경되는 시간 만들기