React Hook(4)

📌 useScroll

• 유저가 스크롤 해서 무언갈 지나쳤을 때 색상을 바꾸거나 사용자가 원하는대로.

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", onScroll);
    };
  });
  return state;
};

const App = () => {
  const { y } = useScroll();
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>Hi</h1>
    </div>
  );
};

😀 코드 설명

1. useScroll()
   • state의 값 x,y의 값을 넣어줌.
   • onScroll함수에서 window.scrollY, window.scrollX로 x,y의 좌표를 받아옴.
   • useEffect로 event 추가 및 생성.
2. App()
   • y의 값만 받아옴.
   • y 좌표값에 따른 h1의 색을 바꿔줌. red or blue
   • style에서 1000vh를 통해 스크롤을 만들어줌.

📌 useFullscreen

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.mozRequestFullScreen) {
        element.current.mozRequestFullScreen();
      } else if (element.current.webkitRequestFullscreen) {
        element.current.webkitRequestFullscreen();
      } else if (element.current.msRequestFullscreen) {
        element.current.msRequestFullscreen();
      }
      runCb(true);
    }
  };
  const exitFull = () => {
    document.exitFullscreen();
    if (callback && typeof callback === "function") {
      callback(false);
    }
  };
  return { element, triggerFull, exitFull };
};
const App = () => {
  const onFullS = (isFull) => {
    console.log(isFull ? "We are full" : "We are small");
  };
  const { element, triggerFull, exitFull } = useFullscreen();
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <div>
        <img
          ref={element}
          src="https://t1.daumcdn.net/cfile/blog/2455914A56ADB1E315"
        />
        <button onClick={exitFull}> Exit fullscreen</button>
      </div>
      <button onClick={triggerFull}> Make fullscreen</button>
    </div>
  );
};

😀 코드 설명

1. useFullscreen
   • triggerFull 함수 : 브라우저 종류에 따른 if문. fullscreen으로 만들어줌.
   • runCb 함수를 통해 callback 함수 실행. callback함수 : App의 onFullS 함수.
   • exitFull 함수 : document 함수를 통한 전체화면 exit.

📌 useNotification

• 알람이 실행되는 function
• notification API 사용.
• 엄연히 Hook은 아님.

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;
};

const App = () => {
  const triggerNotif = useNotification("Can I steal your kimchi?");
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <button onclick={triggerNotif}>Hello</button>
    </div>
  );
};

📌 useAxios

• HTTP request를 만드는 것.

index.js

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import useAxios from "./useAxios";

const App = () => {
  const { loading, data, error, refetch } = useAxios({
    url: "https://yts.am/api/v2/list_movies.json"
  });
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <h1>{data && data.status}</h1>
      <h2>{loading && "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, document.getElementById("root"));

useAxios.js

import defaultAxios from "axios";
import { useEffect, useState } from "react";

const useAxios = (opts, axiosInstance = defaultAxios) => {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null
  });
  const [trigger, setTrigger] = useState(0);
  if (!opts.url) {
    return;
  }
  const refetch = () => {
    setState({
      ...state,
      loading: true
    });
    setTrigger(Date.now());
  };
  useEffect(() => {
    axiosInstance(opts)
      .then((data) => {
        setState({
          ...state,
          loading: false,
          data
        });
      })
      .catch((error) => {
        setState({ ...state, loading: false, error });
      });
  }, [trigger]);
  return { ...state, refetch };
};

export default useAxios;

<출처 : 노마드코더>