React 앱에서 커서 사용자 정의

이 기사에서는 Reactjs로 사용자 정의 커서를 만드는 방법을 보여줍니다.

커스터마이즈된 커서를 사용하면 웹사이트가 더 나은 사용자 경험을 제공하므로 눈에 띄게 만들 수 있지만 시작하기 전에 이 문서를 따라가려면 ReactJS에 대한 기본 지식이 필요합니다.

머신에 Nodejs가 설치되어 있어야 합니다. 그렇지 않은 경우 here을 클릭하여 로컬 장치에 Nodejs를 다운로드하고 설치합니다. Nodejs 설치는 기본적으로 NPM과 함께 제공되며 이 자습서에 필요한 패키지를 설치하는 데 사용할 것입니다.

1 단계

터미널에서 다음 명령을 실행하여 React를 설치하는 것으로 시작하겠습니다.npx create-react-app project-name위의 "project-name"을 원하는 이름으로 바꿀 수 있습니다. 템플릿이 생성되면 선택한 텍스트 편집기로 폴더를 엽니다.

2 단계

애니메이션에 framer-motion 라이브러리를 사용할 것이므로 터미널에서 다음 명령을 실행하여 라이브러리를 설치해 보겠습니다.npm i framer-motion

3단계

이제 모든 종속 항목을 설치했으므로 마우스 포인터의 위치를 ​​추적하고 useState 후크에 저장하는 방법을 찾아야 합니다.

import React, { useEffect, useState } from "react";

function App() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (ev: MouseEvent) => {
    setMousePosition({
      x: ev.clientX,
      y: ev.clientY,
    });
  };
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
  }, []);


  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  );
}

export default App;

4단계

framer-motion에서 모션을 가져오고 모션에서 div 요소를 렌더링한 다음 변형 소품을 div 요소에 추가해 보겠습니다. 스타일링을 위해 요소에 className을 추가하는 것을 잊지 마십시오. 아래 코드를 참조할 수도 있습니다.

import React, { useEffect, useState } from "react";
import { motion, Variants } from "framer-motion";
function App() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (ev: MouseEvent) => {
    setMousePosition({
      x: ev.clientX,
      y: ev.clientY,
    });
  };
  useEffect(() => {
    window.addEventListener("mousemove", handleMouseMove);
  }, []);

  const variants: Variants = {
    default: {
      x: mousePosition.x,
      y: mousePosition.y,
    },
  };

  return (
    <div className="App">
      <motion.div className="cursor" variants={variants} animate="default" />
    </div>
  );
}

5단계

이 마지막 단계에서는 커서의 스타일을 지정해 보겠습니다. 스타일은 선택에 따라 다릅니다.

.cursor {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  pointer-events: none;
}

이제 이 기사의 끝 부분에 도달했습니다. 이 기사가 도움이 되기를 바랍니다. 그렇다면 이 게시물을 더 많은 사람들과 공유해주세요. github에서 소스 코드를 찾을 수 있습니다.