[React Hooks] useFadeIn, useNetwork

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다.

 

 

useFadeIn

element를 자동으로 서서히 나타나게 만드는 역할을 한다.

import React, { useEffect, useRef } from "react";

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 = `opacity ${duration}s ease-in-out ${delay}s`;
      current.style.opacity = 1;
    }
  }, []);
  return { ref: element, style: { opacity: 0 } };
};

const App = () => {
  const fadeInH1 = useFadeIn(1, 2);
  const fadeInP = useFadeIn(5, 5);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello</h1>
      <p {...fadeInP}>hello hi hello hi</p>
    </div>
  );
};

export default App;

h1 태그는 2초 뒤에 1초동안 나타나고, p 태그는 5초 뒤에 5초동안 나타난다.

useRef를 이용해서 element의 ID를 뽑아내고, useEffect를 통해서 component가 mount될 때만 transition, opacity 속성을 넣어주도록 한다.

duration은 변화되는 시간이고, 기본값은 1초이다. delay는 나타나기까지의 지연시간이고, 기본값은 0초로 설정했다.

 

 

useNetwork

navigator가 online 또는 offline이 되는 것을 막아주는 역할을 한다.

useNetwork는 network 상태가 바뀔 때마다 function을 부른다.

import React, { useEffect, useState } from "react";

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

const App = () => {
  const handleNetworkChange = (online) => {
    console.log(online ? "We just went online" : "We are offline");
  };
  const onLine = useNetwork(handleNetworkChange);
  return (
    <div className="App">
      <h1>{onLine ? "Online" : "Offline"}</h1>
    </div>
  );
};

export default App;

useState을 이용해서 기본값은 navigator.online으로 설정한다. navigator.online은 웹사이트가 온라인이라면 true, 아니라면 false를 반환한다.

navigator가 online이면 항상 현재의 status를 갖고 있기 때문에, offline으로 바뀐다면 setStatus(navigator.onLine)을 통해 상태를 바꿔주도록 한다.

inspection의 Network 탭에서 online, offline을 바꿔주면 화면에 online, offline이 바뀌어 출력된다.