React Hooks (2)

* Use Effect

· useEffect는 componentWillUnmount와 componentDidMount, componentWillUpdate와 비슷함

· useEffect는 2개의 인자를 받는데 첫 번째 인자는 function으로써의 effect

두 번째 인자는 deps, deps가 있다면 effect는 (deps) 리스트에 있는 값일 때만 변하도록 활성화

 

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

import ReactDOM from "react-dom";

 

const App = () => {

const sayHello = () => console.log("hello");

const [number, setNumber] = useState(0);

const [aNumber, setAnumber] = useState(0);

useEffect(sayHello, [number]);

//component가 Mount 되었을 때 실행시키고 그러고나서 어떤 경우에도 실행시키고 싶지 않다면 빈 dependency 전달

//useEffect(sayHello, []);

 

return (

<div className="App">

<div>Hi</div>

<button onClick={() => setNumber(number+1)}>{number}</button>

<button onClick={() => setAnumber(aNumber+1)}>{aNumber}</button>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

· useEffect(sayHello, [number]); 에서 sayHello에는 useEffect로 부터 function이 리턴 됨 (componentWillUnmount)

 

- useTitle

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

import ReactDOM from "react-dom";

 

const useTitle = (initialTitle) => {

const [title, setTitle] = useState(initialTitle);

const updateTitle = () => {

const htmlTitle = document.querySelector("title");

htmlTitle.innerHTML = title;

};

useEffect(updateTitle, [title]);

return setTitle;

}

 

const App = () => {

const titleUpdater = useTitle("Loading...");

setTimeout(() => titleUpdater("Home"), 5000);

 

return (

<div className="App">

<div>Hi</div>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

- useClick

· reference는 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법,

document.getElementBtID()를 사용한 것과 동등하게

· react에 있는 모든 component는 reference element를 가지고 있음

 

ex 1)

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

import ReactDOM from "react-dom";

 

const App = () => {

const potato = useRef();

setTimeout(() => potato.current.focus(), 5000)

//getElementByID()를 하는 것과 같은 것

return (

<div className="App">

<div>Hi</div>

<input ref={potato} placeholder="la" />

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

ex 2)

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

import ReactDOM from "react-dom";

 

const useClick = onClick => {

const element = useRef();

useEffect(() => {

if(element.current){

element.current.addEventListener("click", onClick);

}

 

//componentWillUnMount때 호출

//component가 mount되지 않았을 때 eventListener가 배치되게 하고 싶지 않기 때문

return () => {

if(element.current){

element.current.removeEventListener("click", onClick);

}

};

 

}, []);

return element;

}

 

const App = () => {

const sayHello = () => console.log("say hello");

const title = useClick(sayHello);

return (

<div className="App">

<h1 ref={title}>Hi</h1>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

- useConfirm

· 사용자가 무언가를 하기 전에 확인하는 것인데 사용자가 버튼을 클릭하는 작업을 하면 (이벤트를 실행하기 전에) 메세지를 보여주고 싶은 것

 

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

import ReactDOM from "react-dom";

 

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;

  }

 

const App = () => {

const deleteWord = () => console.log("Deleting the world");

const abort = () => console.log("Aborted");

const confirmDelete = useConfirm("Are you sure", deleteWord, abort);

return (

<div className="App">

<button onClick={confirmDelete}>Delete the world</button>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

- usePreventLeave

· windiow 창을 닫을 때 "아직 저장하지 않았어"

 

import React, { useEffect, useState, 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 />, rootElement);

 

- useBeforeLeave

· 기본적으로 탭을 닫을 때 실행되는 function

· 마우스가 페이지를 벗어나면 function 실행

 

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

import ReactDOM from "react-dom";

 

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>Hello</h1>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

- useFadeIn

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

import ReactDOM from "react-dom";

 

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

const fadeInP = useFadeIn(5,10);

return (

<div className="App">

<h1 {...fadeInH1}>Hello</h1>

<p {...fadeInP}>lorem ipsum lalalalala</p>

</div>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

 

- useNetwork

navigator가 online 또는 offline이 되는걸 막아줌

 

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

import ReactDOM from "react-dom";

 

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>

);

};

 

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);