갈푸라떼
갈푸라떼는 개발중
갈푸라떼
전체 방문자
오늘
어제
  • 분류 전체보기 (232)
    • CS (0)
      • CSinfo (0)
    • Frontend (15)
      • HTML,CSS (1)
      • Javascript (2)
      • React (0)
      • React Hook (12)
    • Backend (0)
      • Python (0)
      • Node.js (0)
      • php (0)
    • DB (2)
      • MySQL (2)
      • BigQuery (0)
      • Mongodb (0)
    • Study (186)
      • JavaScript (72)
      • JavaScript(Clean code) (50)
      • Node.js (11)
      • HTML,CSS (13)
      • React (30)
      • TypeScript (10)
      • React-Native (0)
    • Error (2)
      • error (2)
    • Git (22)
      • Git (22)
    • Help Coding (4)
      • Useful websites (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • Github

공지사항

인기 글

태그

  • class
  • symbol
  • PM2
  • 오버라이딩
  • 스코프 체인
  • 객체타입
  • 인터프리터
  • 렉시컬 환경
  • 호이스팅
  • prototype
  • nodemon
  • this
  • 자바스크립트엔진
  • 싱글스레드
  • 네이밍
  • 이터러블
  • 정적 레벨
  • 원시타입
  • 프로토타입
  • 심볼
  • ECMAScript
  • Arrow
  • 함수
  • function
  • 실행 컨텍스트
  • SPREAD
  • Babel
  • 컴파일러
  • 상속
  • structure

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
갈푸라떼

갈푸라떼는 개발중

Frontend/React Hook

[React-Hooks] React Hooks - useFadeIn & useNetwork

2022. 7. 13. 01:25

* useFadeIn

  • useFadeIn은 어떤 요소를 시간이 지남에 따라 서서히나게 하는 hooks 입니다.

* useFadeIn 예시코드

import { useEffect, useRef } from "react";

const useFadeIn = (duration = 1, delay = 0) => {
  const element = useRef();
  useEffect(() => {
    if (typeof duration === "number" || typeof delay === "number") {
      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 fadeIn = useFadeIn();
  return <h1 {...fadeIn}>Hello</h1>;
};

export default App;
  • transition-duration : 트랜지션이 일어나는 지속 시간을 명시하는 속성
  • transition-delay : 속성이 변하는 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의

 


* useNetwork

  • navigator가 online 또는 offline되는걸 막아준다.
  • navigator.onLine은 나의 웹사이트가 온라인인지 아닌지에 따라서 true또는 false를 반환한다.
import { useEffect, useState } 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);
    return function () {
      window.removeEventListener("online", handleChange);
      window.removeEventListener("offline", handleChange);
    };
  }, []);
  return status;
};

const App = () => {
  const handleNetworkChange = (online) =>
    console.log(online ? "online!!!" : "offline");
  const onLine = useNetwork(handleNetworkChange);
  return (
    <>
      <h1>{onLine ? "Online" : "offline"}</h1>
    </>
  );
};

export default App;
  • 네트워크가 online일 경우 offline일 경우에 맞게 true false가 반환되어 hook이 실행된다.

'Frontend > React Hook' 카테고리의 다른 글

[React-Hooks] React Hooks - useFullscreen  (0) 2022.07.13
[React-Hooks] React Hooks - useScroll  (0) 2022.07.13
[React-Hooks] React Hooks - useBeforeLeave  (0) 2022.07.13
[React-Hooks] React Hooks - usePreventLeave  (0) 2022.07.12
[React-Hooks] React Hooks - useClick & useHover  (0) 2022.07.12
    'Frontend/React Hook' 카테고리의 다른 글
    • [React-Hooks] React Hooks - useFullscreen
    • [React-Hooks] React Hooks - useScroll
    • [React-Hooks] React Hooks - useBeforeLeave
    • [React-Hooks] React Hooks - usePreventLeave
    갈푸라떼
    갈푸라떼

    티스토리툴바