#7. useFadeIn & useNetwork

useFadeIn

---

• Element 하나를 자동으로 서서히 나타나도록 하는 기능
  • animation 기능을 hook에 넣어 사용한다.

import React, { useEffect, useState, 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, 10);
  return (
    <div className="App">
      <h1 {...fadeInH1}>hello</h1>
      <p {...fadeInP}>lorem ipsum lalalalal</p>
    </div>
  );
};

export default App;

2초 뒤 1초 동안 제목이, 10초 뒤 5초 동안 글이 나온다.

코드 설명

const useFadeIn = (duration = 1, delay = 0) => {

  const element = useRef();

  return { ref: element, style: { opacity: 0 } };
};

  const fadeInH1 = useFadeIn(1, 2);

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

• fadeInH1에는 useFadeIn을 실행시켜 리턴받은 { ref: element, style: { opacity: 0 } }을 갖고 있다.
• spread 연산자를 이용해 fadeInH1이 갖고 있는 프로퍼티들을 h1에게 준다.
  • <h1 ref = element, style = {opacity : 0}> 

 

  useEffect(() => {
    if (element.current) {
      const { current } = element;
      current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;
      current.style.opacity = 1;
    }
  }, []);

• 컴포넌트가 mount 될 때 if문을 수행하도록 한다.
  • 즉, 컴포넌트가 시작될 때 element.current의 transition, opacity 스타일이 적용되어 fadeInH1()이 값을 리턴할 때 해당 element가 리턴된다.

 

 const { current } = element;

• 구조 분해 할당을 통해 element 객체의 current를 변수 current에 받는다.
  • 즉 current = element.current이다.

 

current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;
current.style.opacity = 1;

• fadeIn 할 때 (transition 시) 파라미터로 입력받은 값인 duration 만큼의 시간이 걸린다는 뜻
• 파라미터로 입력받은 값만큼 deay가 생긴다는 뜻
• 현재 ref 된 element의 투명도(opacity) 값은 1이다.

 
 

useNetwork

---

• navigator가 online 또는 offline이 되는 것을 막아주는 기능
  • useNetwork가 할 일은 네트워크 상태가 바뀔 때마다 function을 부르는 것이다.

import React, { useEffect, useState, useRef } 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;

코드 설명

const [status, setStatus] = useState(navigator.onLine);

• navigator는 웹 브라우저에서 제공하는 전역 객체 중 하나
  
  • 이 객체는 현재 브라우저 세션의 정보를 제공한다. (ex. navigator.language; 사용자의 기본 언어 반환, navigator.userAgent; 현재 사용자의 에이전트 정보 제공)
  • navigator.onLine은 브라우저의 현재 온라인 여부를 나타내는 속성으로, 브라우저가 온라인이면 true / 오프라인이면 false를 반환한다.

 

  useEffect(() => {
    window.addEventListener("online", handleChange);
    window.addEventListener("offline", handleChange);
    () => {
      window.removeEventListener("online", handleChange);
      window.removeEventListener("offline", handleChange);
    };
  }, []);

• 컴포넌트가 mount 되었을 때 실행하는 이벤트리스너 문이다.
  • window.addEventListener("online", handleChange); 에서 online (or offline)은 이벤트의 유형을 나타낸다. 
    
    • 브라우저는 온라인 상태로 전환 될 때 이벤트를 발생시키고, 이벤트가 발생했을 때 실행되는 함수는 handleChange이다. 
• ()=>{} 을 이용한 반환문을 통해 컴포넌트가 unmount 될 때 이벤트리스너를 제거하도록 하였다.
  • ※ return을 사용하지 않아도 unmount 시 반환문이 실행되는 건가?

 

const useNetwork = (onChange) => {
  const [status, setStatus] = useState(navigator.onLine);
  const handleChange = () => {
    if (typeof onChange === "function") {
      onChange(navigator.onLine);
    }
    setStatus(navigator.onLine);
  };
  
  
  

const handleNetworkChange = (online) => {
    console.log(online ? "we just went online" : "we are offline");
  };
  const onLine = useNetwork(handleNetworkChange);

• handleNetworkChange()가 useNetwork의 파라미터로 들어가고 useNetwork는 이것을 onChange 콜백함수로 받는다.
• 만약 브라우저가 online 상태면 navigator.onLine은 true가 되고, 따라서 handleNetwork()의 online도 true가 되어 "we just went online" 이 콘솔에 출력된다.
• 그 후에는 setStatus를 실행하여 현재 상태 status를 online / offline 상태에 따라 true / false로 설정하고, 컴포넌트는 리렌더링 된다.
• useNetwork는 status 값을 반환하고, 그 반환값 (true / false)을 가지고 App 컴포넌트에서는 h1태그의 값으로 online / offline을 띄운다.

online상태에서 브라우저를 실행했을 때 순서

 
 1. App 컴포넌트가 렌더링된다.
 
 2. useNetwork 훅이 호출된다.
 
 3. useState 훅을 사용하여 status 상태와 setStatus 함수를 초기화한다. 초기값은 navigator.onLine의 값으로 설정된다.
 
 4. useEffect 훅이 호출된다.
 
 5. 브라우저가 온라인이므로 handleChange 함수가 호출된다.
 
 6. onChange 콜백 함수가 제공되지만 여기서는 handleNetworkChange 함수가 호출되어 "we just went online"이 콘솔에
출력된다.
 
 7. onLine 변수가 useNetwork 훅으로부터 반환된 상태값을 갖는다.
 
 8. 렌더링 결과로 "Online"이 출력된다.