[React] useRef를 사용하여 fadeIn 적용

코드

import React from 'react'
import { useRef } from 'react';
import { useEffect } from 'react';

function 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;
    }
  }, []);
  
  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(5, 10);

  return (
    <div>
      <h1 {...fadeInH1}>Hello</h1>
      <p {...fadeInP}>lorem ipsum lalalala</p>
    </div>
  )
}

배운점

• useRef를 element에 스프레드 연산자로 사용하면 useRef의 모든 효과가 적용된다.(기존에는 ref={fadeInH1} style={{opacity: 0}} 적었음)
• useRef.current는 현재 가리키는 element다.
• return시 ref의 프로퍼티를 설정해 줄 수 있다.