React FadeIn 함수 만들기 (useRef, useEffect)

실습은 codesandbox를 이용했고, 노마드코더님의 인강을 참조하고 공부 및 복습 목적으로 작성했습니다.

 

실습을 시작하기에 앞서 css 트랜지션을 사용하도록 하겠습니다.

 

transition-duration : 트랜지션이 일어나는 지속 시간을 명시하는 속성입니다.

transition-delay : 속성이 변하는 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.

---

export default function App() {
  return (
    <div className="App">
      <h1>hello!</h1>
      <p>fadeIn Training</p>
    </div>
  );
}

시작은 화면에 h1과 p태그에 fadeIn 효과를 주도록 하겠습니다.

 

먼저 useFadeIn 함수를 만들고 인자값으로는 duration 과 delay 값을 받도록 하겠습니다.

const useFadeIn = (duration = 0, delay = 0) => {
  if (typeof duration !== "number" || typeof duration !== "number") {
    return;
  }
};

이제 저희는 duration 과 delay 를 받아왔으니 hooks useRef()를 사용하여 특정 element의 DOM에 접근하도록 하겠습니다 그리고 useEffect()를 사용하여 componentDidMount와 같은 상태로 렌더링이 완료됐을 때 실행되도록 하겠습니다.

const useFadeIn = (duration = 0, delay = 0) => {
  if (typeof duration !== "number" || typeof delay !== "number") {
    return;
  }
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      const { current } = element;
      console.log(current);
    }
  }, []);
  return { ref: element };
};

<h1 {...fadeInH1}>hello!</h1>
<p {...fadeInP}>fadeIn Training</p>

 

위와 같이 작성하고 console.log로 current 값을 확인해보면 해당 태그가 콘솔창에 출력되는 것을 알 수 있습니다.

이제 정상적으로 element의 current 값들을 가져오는 것을 확인했으니 실제 current에 style을 추가하도록 하겠습니다.

const useFadeIn = (duration = 0, 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 ${delay}s`;
      current.style.opacity = 1;
    }
  }, []);
  return { ref: element, style: { opacity: 0 } };
};

---

전체적인 코드

import React, { useEffect, useRef } from "react";
import "./styles.css";

const useFadeIn = (duration = 0, 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 ${delay}s`;
      current.style.opacity = 1;
    }
  }, []);
  return { ref: element, style: { opacity: 0 } };
};

export default function App() {
  const fadeInH1 = useFadeIn(3, 2);
  const fadeInP = useFadeIn(4, 2);
  return (
    <div className="App">
      <h1 {...fadeInH1}>hello!</h1>
      <p {...fadeInP}>fadeIn Training</p>
    </div>
  );
}