끄적끄적 코딩
article thumbnail
[React] Axios
React 2021. 1. 9. 01:47

npm i axios axios를 설치합니다. // index.js import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; import useAxios from "./useAxios"; const App = () => { const { loading, data, error, refetch } = useAxios({ url: "https://cors-anywhere.herokuapp.com/https://yts.am/api/v2/list_movies.json", }); return ( {data && data.status} {loading && "Loading"} {error && "Error"..

article thumbnail
[React] 알림 보내기
React 2021. 1. 9. 00:57

// useNotification.js const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new Notification(title, options); } else { return; } }); } else { new Notification(title, options); } }; return fireNotif; }; ..

article thumbnail
[React] 전체 화면
React 2021. 1. 9. 00:25

// useFullscreen.js import React, { useRef } from "react"; const useFullscreen = (callback) => { const element = useRef(); const runCb = (isFull) => { if (callback && typeof callback === "function") { callback(isFull); } }; const triggerFull = () => { if (element.current) { if (element.current.requestFullscreen) { element.current.requestFullscreen(); } else if (element.current.mozRequestFullScre..

[React] 스크롤
React 2021. 1. 9. 00:00

// index.js import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; import useScroll from "./useScroll"; const App = () => { const { y } = useScroll(); return ( 100 ? "red" : "blue" }}> Hello ); }; const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); // useScroll.js import React, { useEffect, useRef, useState } from "react"; c..

[React] 현재 네트워크 상태 확인
React 2021. 1. 8. 23:43

// useNetwork.js const useNetwork = (onChange) => { const [status, setStatus] = useState(navigator.onLine); const handleChange = () => { onChange(navigator.onLine); setStatus(navigator.onLine); }; useEffect(() => { window.addEventListener("online", handleChange); window.addEventListener("offline", handleChange); return () => { window.removeEventListener("online", handleChange); window.removeEven..

article thumbnail
[React] 동적 스타일 적용
React 2021. 1. 8. 22:51

텍스트가 딜레이를 가지고 fadeIn방식으로 표시되는 코드입니다. 스타일을 useFadeIn.js에서 적용해주었습니다. // useFadeIn.js import { useRef, useEffect } from "react"; const useFadeIn = (duration = 1, delay = 0) => { const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`; current.style.opacity = 1; } }, []); return { ref: ele..

[React] mouseleave
React 2021. 1. 8. 19:38

mouseleave란 마우스가 페이지 밖으로 빠져나갈 때 발생하는 이벤트입니다. // useBeforeLeave import { useEffect } from "react"; const useBeforeLeave = (onBefore) => { const handle = (event) => { const { clientY } = event; if (clientY { document.addEventListener("mouseleave", handle); return () => { document.removeEventListener("mouseleave", handle); }; }, []); }; export default useBeforeLeave; // index.js import React from "..

article thumbnail
[React] beforeunload
React 2021. 1. 8. 17:55

// usePreventLeave.js const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => window.addEventListener("beforeunload", listener); const disablePrevent = () => window.removeEventListener("beforeunload", listener); return { enablePrevent, disablePrevent }; }; export default usePreventLeave; // index.js import React..

검색 태그