리액트 특정시간 컴포넌트 새로고침!! node-schedule

https://www.npmjs.com/package/node-schedule?activeTab=versions 

node-schedule

 

💫사용법

1. 아래의 App.js에서  라우터를 감싸 컴포넌트를 children 형태로 받거나

2. 주석 처리한 <Refresh /> 와 같이 컴포넌트의 상위에 올린뒤 아래의 Refresh.jsx 의 return 값을 

<>{children}</> 에서 <></> 으로 바꾸어 사용한다.

 

App.jsx

import { RecoilRoot } from "recoil";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Refresh from "./Refresh";

function App() {
  return (
        <RecoilRoot>
            <BrowserRouter>
                <Refresh>
                	 {/* <Refresh /> */}
                	<Route path="/login" element={<Login />} />
                	<Route path="/signup" element={<Signup />} />
                </Refresh>
              </Routes>
            </BrowserRouter>
        </RecoilRoot>

  );
}

export default App;

 

아래와 같이 사용하면 원하는 주, 월, 일, 시,분,초  단위로 반복시점을 지정해 컴포넌트를 자동으로 새로고침 할 수 있다. 👍🏻👍🏻👍🏻

 

Refresh.jsx

import { RecurrenceRule, scheduleJob } from "node-schedule";

const Refresh = ({
  children,
}) => {
 
  // 정각 , 30분마다 새로고침
  useEffect(() => {
    const rule = new RecurrenceRule();
    rule.minute = [0, 30];

    scheduleJob(rule, function () {
      window.location.reload();
    });
  }, []);

  return <>{children}</>;
};

export default Refresh;

 

자세한 사용방법은 npm 페이지에자세히 나와있으니 참고하면 좋을듯!!