dukDukz
[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 사용하여 실시간으로 변경되는 시간 만들기
✔ moment.js Moment js 는 시간이 포함된 데이터를 받아 조작해야 할 경우 가장 많이 사용되는 편리한 라이브러리입니다. 스터디를 모집하는 사이드 프로젝트를 만들 때 사용하였습니다. 현재 시간
haranglog.tistory.com
'웹 개발 > React' 카테고리의 다른 글
[React Error] map "key" with <></> (0) | 2022.09.13 |
---|---|
[React Error] Text nodes / Whitespace cannot appear as a child of <tbody>. (0) | 2022.09.13 |
[recharts] label is not showing (0) | 2022.08.05 |
CRA 로 만들었을때 html 에 환경변수 넣는법 (0) | 2022.07.11 |
localStorage 에 저장 후 새로고침 하기 (0) | 2022.07.08 |