내가 만든 carousel 해결 방법

1번

function Rank({ title, idx }) {
  const [slide, setSlide] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSlide(slide => slide - 32);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const idxPlus1 = idx + 1;

  return (
    <div>
      <ul
        style={{ transform: `translateY(${slide}px)` }}
        className="rankingArea"
      >

직접 inline css에 ` (백틱) 넣고 변수 넣기

function Rank({ title, idx }) {
  const [slide, setSlide] = useState(0);
  const slideref = useRef(null);

  useEffect(() => {
    const timer = setInterval(() => {
      setSlide(slide => slide - 32);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    slideref.current.style.transform = translateY(${slide}px);
  }, [slide]);

  const idxPlus1 = idx + 1;

  return (
    <div>
      <ul
        ref={slideref}

useRef로 해당 css 참조해서 useEffect 사용해서 바꾸기