Custom Hooks... 😵‍ ... 공부하면서 알 것 같으면서도 어려운 것 같다.

---

🎯 useFadeIn

사이트에서 특정 요소가 나타나는 효과를 주기 위한 Hooks이다. 유사한 방식으로 Fade Out Hooks도 만들어 볼 수 있을 것 같다.

const useFadeIn = (duration = 1, delay = 0) => {
  const element = useRef();
  // 페이드인 효과를 줄 요소를 관리하기 위해 useRef를 사용한다.

  useEffect(() => {
    const { current } = element;
    current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;
    current.style.opacity = 1;
  }, []);
  // duration(효과 진행시간)과 delay(효과 지연시간)을 인자로 받는다.
  // 요소에 넣을 효과를 componentDidMount로 정의한다.
  
  return { ref: element, style: { opacity: 0 } };
  // 요소에 인라인으로 넣을 속성을 리턴한다. 
  // opacity로 페이드인 효과를 주기 위해 초기값으로 opacity 값을 0으로 준다.
};

// 사용 예시

const App = () => {
  const handleH = useFadeIn(2, 1);
  const handleP = useFadeIn(5, 3);
  return (
    <div>
      <h1 {...handleH}>Hello</h1>
      <p {...handleP}>welcome to my home!</p>
    </div>
  );
};

---

🎯 useNetwork

사용자가 접속한 네트워크 환경이 온라인인지 오프라인인지에 따라 특정 함수를 실행할 수 있는 Hooks이다.

const useNetwork = (onChange) => {
  const [status, setStatus] = useState(navigator.onLine);
  // 온라인과 오프라인일 때의 상태를 관리한다.
  
  const handleNetwork = () => {
    if (typeof onChange === "function") {
      onChange(navigator.onLine);
    }
    setStatus(navigator.onLine);
  };

  useEffect(() => {
    window.addEventListener("online", handleNetwork);
    window.addEventListener("offline", handleNetwork);
    return () => {
      window.removeEventListener("online", handleNetwork);
      window.removeEventListener("offline", handleNetwork);
    };
  }, []);
  // 이벤트리스너로 온라인과 오프라인일 때 각각 인자로 넘어오는 함수를 실행할 수 있도록 한다. 

  return status;
};

// 사용 예시 

const App = () => {
  const checkStatus = (isOnline) => console.log(isOnline ? "yes" : "no");
  // useNetwork Hooks를 통해 실행되는 함수이다.
  const onLine = useNetwork(checkStatus);

  return (
    <div>
      <h1>{onLine ? "Online" : "Offline"}</h1>
    // 온라인, 오프라인 상태에 따라 텍스트를 노출한다. 
    </div>
  );
};

---

🎯 useScroll

페이드인/아웃과 더불어 웹 페이지에서 자주 사용되는 효과인 스크롤 이벤트를 Hooks로 만들었다.

const useScroll = () => {
  const [scrollState, setScrollState] = useState({
    x: 0,
    y: 0
  });
  // 이벤트의 x, y좌표의 상태를 관리하여 이벤트를 실행한다.

  const handleScroll = () => {
    setScrollState({ x: window.scrollX, y: window.scrollY });
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  // 스크롤 이벤트가 있을 때마다 이벤트가 실행된다.

  return scrollState;
};

const App = () => {
  const { y } = useScroll();

  return (
    <div style={{ height: "1000vh" }}>
      <h1 style={{ position: "fixed", color: y > 100 ? "red" : "green" }}>
        // useScroll로 이벤트를 실행하는 y 값에 따라 컬러가 변경된다. 
        Hello
      </h1>
    </div>
  );
};

---

🎯 useNotification

특정 이벤트에서 알림이 오도록 하는 Hooksd이다. 이 Hooks를 연습하면서 MDN이 얼마나 친절한지 다시 한 번 느꼈다. 🙂

const useNotification = (title, options) => {
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }
  // 해당 브라우저가 알림을 지원하고 있는지 여부를 가장 먼저 확인한다.

  const getNotice = () => {
    if (Notification.permission === "granted") {
      new Notification(title, options);

      if (Notification.permission !== "denied") {
        Notification.requestPermission((permission) => {
          if (permission === "granted") {
            new Notification(title, options);
          }
        });
      }
    }
    // 사용자의 알림 허용 상태에 맞춰 알림을 보내거나 알림 허용을 요청한다.
  };

  return getNotice;
};

// 사용 예시

const App = () => {
  const handleNotice = useNotification("warning", { body: "JW loves you" });

  return (
    <div>
      <button onClick={handleNotice}>Click!</button>
    </div>
  );
};

---

🎯 useAxios

위코드에서 한 달간 진행했던 2번의 프로젝트에서 데이터를 주고받으며 사용해야 하는 경우가 많았는데, 그 때마다 나는 fetch를 사용했었다. 그래서 프로젝트 리팩토링에서 fetch했던 부분을 axios로 변환하기 위해 Axios를 custom Hooks로 만들어 보았다!

axios 설치

npm i axios

App.js

import useAxios from './useAxios';


const App = () => {
  const { Loading, data, refetch } = useAxios({
    url: "https://yts.mx/api/v2/list_movies.json"
  });
  return (
    <div>
      <div>{Loading && "Loading..."}</div>
      <div>{data && data}</div>
      <button onClick={refetch}>Refetch!</button>
    </div>
  );
};

useAxios.js

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

const useAxios = (opts, axiosInstance = defaultAxios) => {
  const [state, setState] = useState({
    Loading: true,
    data: false,
    error: false
  });
  // 로딩, 데이터, 에러 각 상태 초기값을 설정한다.

  const [trigger, setTrigger] = useState(0);

  const refetch = () => {
    setState({
      ...state,
      Loading: true
    });

    setTrigger(Date.now());
  };
  // re-fetch를 위한 버튼 클릭 시 로딩 상태를 true로 변경한다.
  // useEffect를 실행하기 위한 trigger의 상태가 변경되도록 Date 함수를 사용한다.
  
  useEffect(() => {
    axiosInstance(opts)
      .then((res) => setState({ ...state, Loading: false, data: res.status }))
      .catch((error) => {
        setState({ ...state, Loading: true, error: error });
      });
  }, [trigger]);
  // 인자로 전달받은 url에 데이터를 요청하고 그 결과값을 보여준다. 
  // trigger가 변화될 때마다 다시 fetch를 진행한다.

  return { ...state, refetch };
};

export default useAxios;