리액트로 하면 어떻게 해야할지 작성해주실수있나요?
365
8 asked
루프를 useeffect에 넣으니까 그냥 흰화면만 떠서요.. 물론 다음강의보고 완성했지만(css이용한것), click했을때만 자연스럽지 mousemove할때는 끊기더라고여. 리액트로 예시 한번 부탁드립니다.
Answer 1
0
지난 질문에도 말씀드렸다시피 리액트용 코드가 아니라서 수정이 필요합니다.
복붙해서 사용하실 수 없습니다.
구글링을 통해 정보를 얻으셔서 수정을 해주시면 됩니다.
검색 예 ) react requestAnimationFrame
const requestRef = useRef();
const [targetPosition, setTargetPosition] = useState({ x: 0, y: 0 });
const speed = 0.09;
const animate = () => {
setTargetPosition({
x: (targetPosition.x += (마우스.x - targetPosition.x) * speed),
y: (targetPosition.y += (마우스.y - targetPosition.y) * speed),
});
requestRef.current = requestAnimationFrame(animate);
};
useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(requestRef.current);
});
필요하신 코드를 계속 작성해서 드릴 수는 없을 것 같습니다.
우선 강의 내용인 인터랙티브 원리를 이해하신 후
리액트 코드로 변환하는 것을 추천드립니다.
mouse position interpolation과 transition linear interpolation의 차이
0
72
1
mousemove 시 따라 다니는 커서 이미지 wheel 할 경우
0
180
2
부드러운 움직임 구현1 강의 부분 질문있습니다.
0
147
2
go live 실시간 크롬
0
321
1
javascript 도움말 vsCode 확장팩 문의!
0
362
1
블로그 상단 페럴렉스 효과 구현 질문 있습니다!
0
356
1
마우스 인터렉티브 변형 질문
0
338
1
안녕하세요. 수업 잘 듣고 있습니다. 포트폴리오 관련 질문도 가능할까요?
0
397
1
나비가 버튼위로올라가면 버튼의 hover기능이 멈춰버려요
0
344
1
perspective에 대해서
0
285
1
CSS에서 궁금했던 부분 -실전 페럴렉스 강의 부분
0
480
1
requestAnimationFrame 질문
0
362
1
리뉴얼 이전 강의 파일
0
441
1
코드가 미리보기로 보여주는 확장프로그램이 뭔가요?
0
747
1
수업 파일 부탁드립니다~
0
323
1
배경질문
0
353
1
textWrap의 position을 relative로 주는 것에 대해 질문있습니다!
0
289
1
safari에서 position fixed가 잘 동작하지 않습니다
0
981
1
addEventListener후에 익명함수 실행할때 뒤에 false는 어떤 역할을 하는건가요?
0
556
1
스피드 변수로 scrollTop을 두는 이유가 무엇인가요?
0
363
1
완성파일 어디서 받아볼 수 있나요 ?
0
432
1
완성 파일 요청 드립니다.
0
301
1
사진들이 상단 nav바를 침범하는데 침범 못하게 어떻게해야할까요?
0
152
1
리액트에서 똑같이 만든다면 어떻게 만들어야할까요?
0
376
3

