Frontend/React Hook

[React-Hooks] React Hooks - useAxios

* useAxios HTTP 통신 라이브러리 Axios를 활용한 서버와 통신을 하게 해주는 hook * useAxois.js 파일 import defaultAxios from "axios"; import { useState, useEffect } from "react"; const useAxios = (opts, axiosInstance = defaultAxios) => { const [state, setState] = useState({ loading: true, error: null, data: null, }); const [trigger, setTrigger] = useState(0); const refetch = () => { setState({ ...state, loading: true, });..

[React-Hooks] React Hooks - useNotification

* useNotification useNotification는 알림이 실행되는 hook이다. Notification에 대한 정보는 https://developer.mozilla.org/ko/docs/Web/API/notification 해당 링크를 참조 const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new No..

[React-Hooks] React Hooks - useFullscreen

* useFullscreen useFullscreen은 어떤 요소를 풀스크린으로 보여주는 hooks입니다. import { useRef } from "react"; const useFullscreen = (callback) => { const element = useRef(); const triggerFull = () => { if (element.current) { element.current.requestFullscreen(); if (callback && typeof callback === "function") { callback(true); } } }; const exitFull = () => { document.exitFullscreen(); if (callback && typeof callba..

[React-Hooks] React Hooks - useScroll

* useScroll 스크롤을 해서 무언가를 지나쳤을때 색상을 바꾸거나 어떤 행동을 하는 Hook이다. * useScroll 예시코드 import { useEffect, useState } from "react"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0, }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onSc..

[React-Hooks] React Hooks - useFadeIn & useNetwork

* useFadeIn useFadeIn은 어떤 요소를 시간이 지남에 따라 서서히나게 하는 hooks 입니다. * useFadeIn 예시코드 import { useEffect, useRef } from "react"; const useFadeIn = (duration = 1, delay = 0) => { const element = useRef(); useEffect(() => { if (typeof duration === "number" || typeof delay === "number") { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration}s ease-in-out ${dela..

[React-Hooks] React Hooks - useBeforeLeave

* useBeforeLeave 페이지를 벗어날 때 사용자에게 팝업이나 알림을 띄워 줄 수 있는 hook이다 * useBeforeLeave 예시코드 import { useEffect } from "react"; const useBeforeLeave = (onBefore) => { const handle = () => { onBefore(); }; useEffect(() => { if (typeof onBefore === "function") { document.addEventListener("mouseleave", handle); return () => document.removeEventListener("mouseleave", handle); } }, []); }; const App = () => { c..