TIL)노마드코더 React hooks(2)

useEffect의 첫번째 인자는 function값이 들어간다. 

deps는 effect 리스트에 있는 값일 때만 값이 변하도록 활성화 된다?

useEffect(()=> {
(첫번째값)
  },[두번째값deps])

//title에 loding..을 띄우고 5초뒤 home으로 변경되는 hooks
import { useEffect, useState } from "react";
import "./styles.css";

const useTitle = (iniTitle) => {
  const [title, setTitle] = useState(iniTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };
  useEffect(() => 
    updateTitle
  ,[title]);
  return setTitle;
};
export default function App() {
  const titleUpdate = useTitle("loading...");
  setTimeout(() => titleUpdate("Home"),5000)
  return <div className="App"></div>;
}

//useRef를 통해 current.focus하기
export default function App() {
  //Ref는 components의 어떤 부분을 선택할 수 있는 방법
  //document.getElementByID()와 같다
 const InputText = useRef();
 setTimeout(()=> InputText.current.focus(),2000)
  return <div className="App">
    <input ref={InputText} />
  </div>;
}

//onClick 이벤트 hooks
const useClick =(onClick)=> {
  if(typeof onClick !== "function"){
    return
  };

  //1.useClick을 통해 useRef을 만들고,
  //2.ref를 return하고,ref를 title(h1)에 줬고,
  //3.ref안에 element.current가 있는지 확인(조건 충족하면 onClick이벤트 실행)
  //정리 : unmount됐을 때, useEffect의 두번째 조건을 통해
  // eventlistener를 remove를 통해 지워야 한다.
  const element = useRef();
  useEffect(()=> {
  if(element.current) {
    element.current.addEventListener("click",onClick)
  }
  
  return () => {if(element.current) { element.current.removeEventListener("click",onClick)}
}},[])
return element
}
export default function App() {
  //useClick이 mount되었을 때, click 이벤트 추가.
  const onClick = ()=> {}
  const title = useClick();
    return <div className="App">
    <h1 ref={title}>Hello</h1>
  </div>;
}

//cofirm으로 상태창 
const useCofirm = (message="",onConfirm,onCancel) => {
  if(!onConfirm || typeof onConfirm !== "function") {
    return;
  } 
  if(!onCancel || typeof onCancel !== "function") {
    return;
  } 
  const comfirmAction = () => {
    //if cofirm fuction이 해당 browser에 message를 가지고 있다면
    if(confirm(message)){
      onConfirm();
    }else {
      onCancel()
    }
  }
  return comfirmAction;
}
export default function App() {
  const Delete = () => console.log("yse")
  const abort = () => console.log("no")
  const cofirmDelete = useCofirm("sure?",Delete,abort)
    return <div className="App">
    <button onClick={cofirmDelete}>Hello</button>
  </div>;
}

//window창을 닫을 때 저장하지 않은 값이 있을 경우 알림창으로 알림
//크롬창에서 활성화 되는 듯?
const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    //이것을 첨부해야지 값이 들어갔을 때 알려주는 창이 나오는 듯?
    event.returnValue = ""
  }
  const enble = () => window.addEventListener("beforeunload",listener)
  const disenble = () => window.removeEventListener("beforeunload",listener)
  return {enble,disenble}
}
export default function App() {
  const {enble,disenble} = usePreventLeave();

    return <div className="App">
    <button onClick={enble}>Hello</button>
    <button onClick={disenble}>bye</button>
  </div>;
}

//마우스가 페이지를 벗어날 때 뜨는 hooks
const useBeforPageLeave = (onBefore) => {
  if (typeof onBefore !== "function") {
    return;
  }
  const handle = (event) => {
    const clientY = event;
    if(clientY <= 0) {
      onBefore()
    }
  }
  useEffect(()=> {
    document.addEventListener("mouseleave",handle)
    return () => document.removeEventListener("mouseleave",handle)
  },[])
}
export default function App() {
  
const Leave = () => console.log("no")
useBeforPageLeave(Leave)
  return <div className="App">
  </div>;
}

//자동으로 나오도록 하는 hooks (useFadeIn)
const useFadeIn = (duration = 1, delay = 0) => {
  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(4,3)
  return <div className="App">
    <h1 {...fadeInH1}>Hi</h1>
    <p {...fadeInP}>lorem</p>
  </div>;
}

//navigator가 인터넷이 끊기면 메시지를 보여준다.
const useNetwork = onchange => {
  //navigator.onLine은 true,false로 온라인 여부확인가능
  const [status,setStatus] = useState(navigator.onLine);
  const handleChange = ()=> {
    //online이면 setStatus의 navigator는 offline이 된다.
    setStatus(navigator.onLine);
  }
  //online이면 현재의 status를 전달
  useEffect(()=> {
    window.addEventListener("online",handleChange)
    window.removeEventListener("offline",handleChange)
    return ()=> {
      window.addEventListener("online",handleChange)
    window.removeEventListener("offline",handleChange)
    }
  },[])
  return status;
}
export default function App() {
  const handleNetChange = (online) => console.log(onLine? "on":"off")
  const onLine = useNetwork(handleNetChange)
  return <div className="App">
    <h1>{onLine ? "Online" : "offLine"}</h1>
  </div>;
}