이 랩에서는 React 의 useUnload 훅을 살펴보고, 이를 통해 beforeunload 윈도우 이벤트를 처리하는 방법을 알아보겠습니다. 이 랩의 목적은 사용자가 창을 닫으려고 할 때 트리거될 콜백 함수를 생성하기 위해 이 훅을 사용하는 방법을 시연하는 것입니다. 또한 컴포넌트가 언마운트된 후 정리 (cleanup) 를 수행하는 방법도 배웁니다. 이 랩을 마치면 React 에서 윈도우 이벤트를 관리하는 방법에 대한 이해도가 높아질 것입니다.
index.html및script.js는 이미 VM 에 제공되었습니다. 일반적으로script.js및style.css에만 코드를 추가하면 됩니다.
beforeunload 윈도우 이벤트는 다음 단계를 사용하여 처리할 수 있습니다.
useRef() 훅을 사용하여 콜백 함수 fn에 대한 ref 를 생성합니다.'beforeunload' 이벤트를 처리하기 위해 useEffect() 훅과 EventTarget.addEventListener()를 사용합니다.EventTarget.removeEventListener()를 사용합니다.다음은 코드입니다.
const useUnload = (fn) => {
const callbackRef = React.useRef(fn);
React.useEffect(() => {
const callback = callbackRef.current;
window.addEventListener("beforeunload", callback);
return () => {
window.removeEventListener("beforeunload", callback);
};
}, [callbackRef]);
};
const App = () => {
useUnload((e) => {
e.preventDefault();
const exit = confirm("Are you sure you want to leave?");
if (exit) window.close();
});
return <div>Try closing the window.</div>;
};
ReactDOM.createRoot(document.getElementById("root")).render(<App />);오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
축하합니다! React useUnload Hook 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.