pauseOnHover 기능을 사용하여 hover되면 멈출 수 있게 하였다. useState에서 하나의 변수를 선언하여 호버했을 때가 이가 멈출 수 있게 하였다.
importMarqueefrom"react-fast-marquee";
const [isHovered, setIsHovered] = useState(false);
<divonMouseOver={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<MarqueepauseOnHover={isHovered}>
I can be a React component, multiple React components, or just some
text.
</Marquee></div>
그런데 내가 참고한 사이트에서 크기를 마음대로 맞추지 못해 만들어 커스텀 마이징한 것을 보았다. 가볍게 쓸려면 2번의 경우를 사용하여 코드 짠 시간을 절약할 수 있지만, 디테일하여 디자인을 맞춰 짜고 싶다면 1의 방법을 추천한다.
pauseOnHover 기능을 사용하여 hover되면 멈출 수 있게 하였다. useState에서 하나의 변수를 선언하여 호버했을 때가 이가 멈출 수 있게 하였다.
importMarqueefrom"react-fast-marquee";
const [isHovered, setIsHovered] = useState(false);
<divonMouseOver={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<MarqueepauseOnHover={isHovered}>
I can be a React component, multiple React components, or just some
text.
</Marquee></div>
그런데 내가 참고한 사이트에서 크기를 마음대로 맞추지 못해 만들어 커스텀 마이징한 것을 보았다. 가볍게 쓸려면 2번의 경우를 사용하여 코드 짠 시간을 절약할 수 있지만, 디테일하여 디자인을 맞춰 짜고 싶다면 1의 방법을 추천한다.
