Mouse Move Event를 사용해서 마우스 애니메이션 적용
마우스 위치 좌표 값 가져오기
마우스를 따라오는 이미지 효과를 적용시켜 보았습니다.
우선 개발 환경은 NextJS에서 개발 하였습니다.
"use client";
import { useState, useEffect } from "react";
export default function MouseTracker() {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const updateMousePosition = (event: MouseEvent) => {
setPosition({ x: event.pageX, y: event.pageY });
};
window.addEventListener("mousemove", updateMousePosition);
return () => {
window.removeEventListener("mousemove", updateMousePosition);
};
}, []);
return (
<div>
마우스 위치: x: {position.x}, y: {position.y}
</div>
);
}
우선 position을 useState를 사용해서 상태를 저장하고
window.addEventListner를 사용해서 mousemove를 사용합니다.
이렇게 하면 마우스를 움직일때마다 좌표를 받을 수 있습니다.
하지만 이렇게 하면 에러가 발생하게 됩니다
hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<Router actionQueue={{state:{...}, ...}} assetPrefix="">
<HistoryUpdater>
<RuntimeStyles>
<HotReload assetPrefix="">
<ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}>
<DevRootNotFoundBoundary>
<NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}>
<NotFoundErrorBoundary pathname="/" notFound={<NotAllowedRootNotFoundError>} notFoundStyles={undefined} ...>
<RedirectBoundary>
<RedirectErrorBoundary router={{...}}>
<Head>
<link>
<RootLayout>
<html
lang="en"
- className="trancy-ko"
>
...
...