React Hook(3)

📌 UseConfirm

• 사용자가 무엇인가 하기전에 확인하는 것.
• ex) 사용자가 버튼을 클릭하는 작업을 하면 이벤트 실행 전에 메세지를 보여주는 것.
• useState, useEffect를 사용하지 않기에 엄연히 Hook이 아님.

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

const useConfirm = (message = "", callback, rejection) => {
  if (typeof callback !== "function") {
    return;
  }
  const confirmAction = () => {
    if (confirm(message)) {
      callback();
    } else {
      rejection();
    }
  };
  return confirmAction;
};

const App = () => {
  const deleteWorld = () => console.log("Deleting the world");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld, abort);
  return (
    <div className="App">
      <button onClick={confirmDelete}> Delete the world </button>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, document.getElementById("root"));

😂 코드 설명
1. useConfirm함수는 어떤 것을 실행하기 전, 확인 메시지????
2. if (typeof callback !== "function") : callback이 함수? 함수가 아니면 return
3. confirmAction 함수

• if(confirm(message)) : 확인 메시지에서 true일 경우, callback()함수 실행.
• else : 확인 메시지에서 false인 경우, rejection함수 실행.

4, "Delete the world" 버튼을 클릭 -> "Are you sure?"의 확인메시지 실행 -> true, false의 답변에 따라 callback, rejection함수 실행.

const useConfirm = (message = "", onConfirm, onCancel) => {
  if (!onConfirm || typeof onConfirm !== "function") {
    return;
  }
  if (onCancel && typeof onCancel !== "function") {
    return;
  }
  const confirmAction = () => {
    if (confirm(message)) {
      onConfirm();
    } else {
      onCancel();
    }
  };
  return confirmAction;
};

1. onConfirm은 필수요소이기에, !onConfirm || typeof onConfirm !=="function"
2. onCancel은 필수요소가 아니기에, onCancel && onCancel !== "function"

📌 PreventLeave

• window창을 닫았을 때, 저장이 되지 않았음을 알려줌

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

const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };
  const enablePrevent = () => window.addEventListener("beforeunload", listener);
  const disablePrevent = () =>
    window.removeEventListener("beforeunload", listener);
  return { enablePrevent, disablePrevent };
};

const App = () => {
  const { enablePrevent, disablePrevent } = usePreventLeave();
  return (
    <div className="App">
      <button onClick={enablePrevent}> Protect</button>
      <button onClick={disablePrevent}> UnProtect</button>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, document.getElementById("root"));

1. usePreventLeave() 함수
   • listener : 이벤트가 발생하면 브라우져가 이벤트담은 객체를 생성하여 보여줌.
   • enablePrevent : window에 event를 add.
   • disablePrevent : window에 event를 remove.
   • enablePrevent이면 창을 나가려할 때 message상자를 띄워 물어봄.
   • disablePrevnet이면 창을 나가려할 때 그냥 나가짐.
2. App 함수
   • const{enablePrevent, disablePrevent} = usePreventLeave() 하여 각각의 onClick에 넣어줌.

📌 useBeforeLeave

• 화면에 focus가 나갔을 때 실행되는.

const useBeforeLeave = (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);
  }, []);
};

const App = () => {
  const begForLife = () => console.log("Pls dont leave");
  useBeforeLeave(begForLife);
  return (
    <div className="App">
      <h1>Hi</h1>
    </div>
  );
};

😥 코드 설명

1. useBeforeLeave
   • onBefore의 type에 따른 return
   • handle 함수를 통해 event의 y좌표를 구하고 y좌표가 0보다 작을 때 (커서가 위로 넘어갈 때) onBefore함수를 실행.
   • useEffect 함수로 실행됐을 때 event를 넣어주고 종료될 때 event를 제거.
2. App
   • begForLife 함수 : console.log 함수.
   • begForLife 함수를 useBeforeLeave 매개변수로 넘겨줌.

📌 useFadeIn

• element를 서서히 나타나게 만드는 효과. 지연 시키는 효과.

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, 10);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hi</h1>
      <p {...fadeInP}>lalala </p>
    </div>
  );
};

😥 코드 설명

1. useFadeIn
   • duration, delay의 type이 number일 때 실행.
   • element = useRef()로 element.current 유무 if문 수행.
   • current의 style값을 설정.
   • duration : 몇 초동안 나타날 것인가., delay : 몇 초후에 나타날 것인가.
2. App
   • {...fadeInH1}을 사용. ref 사용 ❌

📌 useNetwork

• navigator가 online, offline이 되는 것을 인지.

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

😥 코드 설명

1. useNetwork
   • status의 기본 값 : navigator의 값으로 설정. online or offline
   • onChange의 type이 함수일 때 onChange 함수 실행. console.log()
   • setStatus 함수로 navigator함수 설정. navigator 값이 바뀔 때 됨.
   • useEffect로 event를 add 혹은 remove 시켜줌.
2. App
   • onLine의 값에 따라 h1을 Online이나 Offline으로 설정해줌.

<참고 : 노마드코더>