내 손으로 직접 만든 carousel !!

오늘 하루종일 고생해서 만든 carousel

처음엔 사이트 클론하다가 작업자 도구로 보니깐 쉬워보여서 도전했으나 생각보다 만만치 않았다.

거의 4시간정도 걸린 것 같다. 처음에 차근차근 접근하다보니 어떻게 state에 -32씩 누적되게

만들긴 했는데 그 이후로 막혀서 여기저기 많이 검색해서 찾아보고 해결한 것 했다.

검색도 많이하고 해결하는데도 오래걸리긴 했지만 어쨌든 내 손으로 직접 짠 코드라

문제없이 작동하는걸 확인했을땐 나도 모르게 환호성을 지르고 말았다

막상 코딩하다 막히거나 문제 생기면 짜증도 나지만 이걸 해결했을때의 쾌감은 최고...

아마 이 재미로 코딩하는게 아닐까 싶다.

↓ 코드

 const [slide, setSlide] = useState(0);
  const slideref = useRef(null);

  useEffect(() => {
    const timer = setInterval(() => {
      setSlide(slide => slide + 1);
    }, 1000);

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

  useEffect(() => {
    if (slide !== 10) {
      slideref.current.style.transition = 'all 0.5s ease-in-out';
      slideref.current.style.transform = `translateY(${-slide * 32}px)`;
    } else setSlide(0);
  }, [slide]);

  return (
    <div>
      <ul ref={slideref} className="rankingArea">