마우스 이벤트

게임을 하는 화면에서 츄르가 마우스를 따라다녔으면 하는 생각으로
추가를 해봤는데 리액트에서도 addEventListener를 사용을 하면서
생명주기를 생각 하면서 해야하기 때문에 Hook과 같이 사용한다.

//초기 상태 값
const [position, setPosition] = useState<{x:number, y:number}>({ x: 0, y: 0 });


 useEffect(() => {
    const handleMouseMove = (e:any) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);
  
  
  
      <div
      style={{
        position: 'absolute',
        top: position.y,
        left: position.x,
        pointerEvents: 'none',
      }}
    >
      <img src="/public/cat3.png" alt="Following Cursor" />
    </div>

1. 초기값 설정
2. useEffect 훅 실행 handleMouseMove(마운트)
3. 마우스 이동에 따른 handleMouseMove 함수 호출 및 상태 업데이트로 인한 리렌더링 (업데이트)
4. 다른 컴포넌트로 이동 시 useEffect의 클린업 함수 실행 (언마운트)

코드 수정
마우스에 이미지가 따라 오게끔 했는데 이미지와 마우스의 간격이 너무 벌어지고
브라우저의 사이즈에 맞춰서 사이즈가 변경이 되어서 css를 수정함
position: 'fixed'로 수정 하여 간격 사이즈를 수정
브라우저 사이즈에 상관없이 간격 일정

자바스크립트에 마우스 이벤트 객체에서 제공되는 속성 중 하나
브라우저 창 내에서의 마우스 위치를 나타낸다
clientX
clientY

참고
마우스이벤트
마우스이벤트2