[React] React Hook-2.6 useEffect를 활용한 useFadeIn

useFadeIn

 - useEffect를 사용한 hook으로 CSS에서의 transition, opacity 속성을 다룬다.

 

< 초기 화면 >

< 초 뒤 화면 >

< 초 뒤 화면 >

< App.js >

import React, { useRef, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

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;
    }
  }, [duration, delay]);
  if (typeof duration !== "number" || typeof delay !== "number") {
    return;
  }
  return { ref: element, style: { opacity: 0 } };
};

export default function App() {
  const fadeInH1 = useFadeIn(1, 2);
  const fadeInP = useFadeIn(2, 5);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello</h1>
      <p {...fadeInP}>check the opacity and animations with hookssssssssssss</p>
    </div>
  );
}

 

< useFadeIn() >

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;
    }
  }, [duration, delay]);
  if (typeof duration !== "number" || typeof delay !== "number") {
    return;
  }
  return { ref: element, style: { opacity: 0 } };
};

 

1.

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

- useFadeIn hook은 duration, delay를 인자로 받는다. (초기값 각각 1, 0)

  → duration(변하는데 걸리는 시간) delay(해당 속성 값을 실행시키기 전까지 기다리는 시간)

 

- useRef()객체를 생성하여 element에 저장한다.

  → 나중에 출력하고자 할때는 해당 요소 ref prop에 useRef를 연결해주어야 함.

  → Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.

 

2.

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

- element.current가 존재하는경우 element의 current prop를 끌어낸다.

- current.style.transition 속성에 변화를 주어 fadeIn animation 효과를 준다.

  →transition 속성에서는 요소를 디테일하게 값을 줄수 있다. 이 때, opacity(불투명 0~1) 속성을

    duration(변하는데 걸리는 시간), delay(해당 속성 값을 실행시키기 전까지 기다리는 시간)으로 지정한다.

- opacity :  마지막에는 1로 초기화하여 잘 보이도록 한다.

 

3.

  if (typeof duration !== "number" || typeof delay !== "number") {
    return;
  }
  return { ref: element, style: { opacity: 0 } };
};

 

- duration과 delay인자가 숫자가 아닌 경우 useFadeIn 함수를 종료한다.

- useFadeIn 함수는 element 와 style opacity 0을 return 한다.

  → 최초 render 시에는 아무 것도 보이지 않음. 이후 useEffect가 Didmount 되고 animation이 실행되어 글자가 나타나게 된다.

 

 

< App() >

export default function App() {
  const fadeInH1 = useFadeIn(1, 2);
  const fadeInP = useFadeIn(2, 5);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello</h1>
      <p {...fadeInP}>check the opacity and animations with hookssssssssssss</p>
    </div>
  );
}

- fadeInH1, fadeInP  : ref: element, style: { opacity: 0 }

- h1 태그 : 최초 render 후 2초 뒤에 1초 간 변화

- p태그 :  최초 render 후 5초 뒤에 2초 간 변화