[리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useFadeIn

노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다.

nomadcoders.co/

 

[예제 코드]

 

import { StrictMode, useEffect, 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, 2);
  const fadeInP = useFadeIn(5, 10);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello</h1>
      <p>lorem ipsum lalalalal</p>
    </div>
  );
};

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

 

[강의 설명]

 

useFadeIn훅스는 animation을 훅스에 포함시킬 수 있는 방법 중 하나이다.

element의 opcaity의 기본값을 0으로 설정하여 

useEffect가 componentDidMount시에만 동작하게 dependency에 빈배열을 입력해준다.