728x90 코딩16 [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useNetwork 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ [예제 코드] import { StrictMode, useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; const useNetwork = (onChange) => { const [status, setStatus] = useState(navigator.onLine); const handleChange = () => { if (typeof onChange === "function") { onChange(navigator.onLine); } setStatus(navigator.onLine); }; useEffect(() => { win.. 2021. 4. 30. [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useFadeIn 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ [예제 코드] import { StrictMode, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; const useFadeIn = (duration = 1, delay = 0) => { if (typeof duration !== "number" || typeof delay !== "number") { return; } const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opa.. 2021. 4. 30. [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - usePreventLeave 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ [예제 코드] import { StrictMode, useEffect } from "react"; import ReactDOM from "react-dom"; const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => window.addEventListener("beforeunload", listener); const disablePrevent = () => window.removeEventListener("beforeunlo.. 2021. 4. 29. [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useBeforeLeave 노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다. nomadcoders.co/ [예제 코드] import { StrictMode, useEffect } from "react"; import ReactDOM from "react-dom"; const useBeforeLeave = (onBefore) => { if (typeof onBefore !== "function") { return; } const handle = (event) => { //console.log(event); const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => document.removeEven.. 2021. 4. 29. 이전 1 2 3 4 다음 728x90