[React/실전형 리액트 Hooks/노마드코더] #2.5 useFadeIn & useNetwork

 

강의출처

 

https://youtu.be/TxZBPBCKiHE

 

 

 

 

 

---

 

 

useFadeIn

 

 

useFadeIn은 React Hook 중 하나로,

페이지나 요소가 나타날 때 애니메이션과 함께 부드럽게 나타나게 만드는 데 사용된다.

 

useFadeIn Hook은 useEffect Hook을 사용하여 컴포넌트가 마운트될 때, 

opacity 속성을 이용하여 fade-in 애니메이션을 적용한다.

 

 

useFadeIn Hook은 사용자가 설정한 duration(지속 시간)과 delay(지연 시간)에 따라 애니메이션을 제어할 수 있다.

 

 

아래 예제 코드를 통해 살펴보자 !

 

 

 

 

---

 

 

예제코드

 

 

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

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;
    }
  }, []); //dependency를 비워 componentDidMount시에만 동작하도록 한다.
  if(typeof duration !== "number" || typeof delay !== "number") {
    return;
  }
  
  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 Everyone</h1>
      <p {...fadeInP}>This is useFadeIn 😎</p>
    </div>
  )
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

 

이 코드는 React 함수형 컴포넌트를 사용하여 useFadeIn 훅을 구현하고, 

App 컴포넌트에서 이를 사용하여 페이드 인 효과를 적용하는 예시이다.

 

우선, useFadeIn 함수는 duration(페이드 인 지속 시간)과 delay(페이드 인 시작 딜레이)를 인자로 받아

useRef 훅으로 ref 객체를 생성하고,

useEffect 훅으로 이를 활용하여 해당 DOM 요소를 가져와서 opacity 및 transition CSS 속성을 설정한다.

 

그리고 함수가 number 타입의 인자가 아닌 경우를 검증한 뒤, 만약 검증에 실패할 경우 아무것도 반환하지 않는다.

 

App 컴포넌트에서는 useFadeIn 훅을 사용하여 h1 요소와 p 요소에 대한 fadeInH1 및 fadeInP 객체를 생성한다.

그리고 해당 객체를 props로 설정하여 h1 및 p 요소에 대한 opacity 속성을 적용한다.

 

최종적으로, ReactDOM.render 함수를 호출하여 App 컴포넌트를 root 요소에 렌더링 한다.

 

 

 

 

---

 

 

실행결과

 

 

실행 후 2초 뒤에 1초동안 fadeIn 되는 텍스트

 

 

실행 후 10초 뒤에 5초동안 fadeIn 되는 텍스트

 

 

 

 

---

 

 

useNetwork

 

 

useNetwork는 React Hook 중 하나로,

브라우저의 온라인/오프라인 상태를 확인할 수 있도록 해주는 Hook이다.

 

useNetwork Hook은 window.navigator.onLine 이벤트를 사용하여 브라우저의 온라인/오프라인 상태를 감지한다.

 

 

만약 브라우저의 상태가 온라인으로 변경되면, online 속성이 true를 반환하고, 

오프라인으로 변경되면 online 속성이 false를 반환한다.

 

 

아래 예제를 통해 살펴보자 !

 

 

 

 

---

 

 

예제코드

 

 

import React, { useState, useEffect, 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);
    return () => {
      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);

 

 

해당 코드는 useNetwork 커스텀 훅을 사용하여 온라인 또는 오프라인 상태를 확인하는 예제이다.

 

useNetwork 훅은 onchange 콜백 함수를 인자로 받는다.

이 콜백 함수는 인터넷 연결 상태가 변경될 때마다 호출된다.

 

훅 안에서 status라는 상태 값과 handleChange 함수를 선언한다.

status의 초기값은 현재 브라우저의 온라인 여부이며,

handleChange 함수는 인터넷 연결 상태가 변경될 때 호출되며, onchange 콜백 함수가 있다면 이를 실행한다.

그리고 status 상태 값을 navigator.onLine으로 업데이트한다.

 

이후 useEffect 훅을 사용하여 window 객체에 online 및 offline 이벤트 리스너를 추가하고, 

handleChange 함수를 호출하도록 설정한다.

이벤트 리스너는 useEffect 훅의 클린업(cleanup) 함수에서 제거된다.

 

App 컴포넌트에서는 useNetwork 훅을 호출하여 onLine 상태 값을 가져온다.

그리고 해당 상태 값을 이용하여 "online" 또는 "offline" 문자열을 렌더링 한다.

 

 

onchange 콜백 함수가 호출될 때마다,

해당 함수에서는 console.log를 사용하여 현재 인터넷 연결 상태를 로그에 출력한다.

 

 

 

 

---

 

 

실행결과

 

 

network가 online 상태일 때 문자열 출력

 

 

network가 offline 상태일 때 문자열 출력

 

 

 

 

다음 포스팅에서는 useScroll과 useFullScreen에 대해 알아보도록 하자 !