[React] 동적 스타일 적용

텍스트가 딜레이를 가지고 fadeIn방식으로 표시되는 코드입니다.
스타일을 useFadeIn.js에서 적용해주었습니다.

// useFadeIn.js

import { useRef, useEffect } from "react";

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;
    }
  }, []);
  return { ref: element, style: { opacity: 0 } };
};

export default useFadeIn;

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

const App = () => {
  const fadeInH1 = useFadeIn(3);
  const fadeInP = useFadeIn(2, 3);
  return (
    <div className="App">
      <h1 {...fadeInH1}>Hello</h1>
      <p {...fadeInP}>Nice to meet you!</p>
    </div>
  );
};

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

useRef를 통해 해당 태그를 참조합니다.

const element = useRef();
element.current.style.opacity = 1

위와 같은 형식으로 스타일을 다양하게 넣을 수 있으며
element를 태그에 넣어주면 해당 스타일이 적용됩니다.