useFadeIn

기본적으로 하나의 element를 가지는데, 자동으로 서서히 나타나게 할 것이다.

먼저 hello 가 나오고 서서히 bye가 나올 것이다.

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

  //onbefore은 뭐가 되었던 function이 될 거니까 확인하자

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

export default function App() {
  const fadeInH1 = useFadeIn(1, 2);
  const fadeInP = useFadeIn(5, 10);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello</h1>
      <p {...fadeInP}>bye</p>
    </div>
  );
}

hook을 더 크게 만들고 싶다면
timing, opacity 같은 것들은 property를 설정해주면 되겠지..

useNetwork

navitor가 onlone 인지 offlone인지 알려 줄 것이다.

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

  //onbefore은 뭐가 되었던 function이 될 거니까 확인하자

  const useNetwork = onChange => {
    const [status, setStatus] = useState(navigator.onLine);
    //navigator가 online이면 현재의 상태를 줄 것이다.
    //만약 이 값이 바꾼다면..내가 만약 online상태라면 이것은 바뀔 것이고
    //setStatus 의 navigator의 online은 offline이 될 것이다.
    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;
}


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

나는 근데 상태 바뀌는 방법을 좀 알아야 겠다..