inflearn logo
강의

Course

Instructor

Interactive Web Development Know-How in a Few Lines [Beginner's Edition]

리액트로 하면 어떻게 해야할지 작성해주실수있나요?

365

jk k

8 asked

0

스크린샷 2022-09-16 오후 3.00.09.png루프를 useeffect에 넣으니까 그냥 흰화면만 떠서요.. 물론 다음강의보고 완성했지만(css이용한것), click했을때만 자연스럽지 mousemove할때는 끊기더라고여. 리액트로 예시 한번 부탁드립니다.

인터랙티브-웹 javascript

Answer 1

0

coding11

지난 질문에도 말씀드렸다시피 리액트용 코드가 아니라서 수정이 필요합니다.

복붙해서 사용하실 수 없습니다.

구글링을 통해 정보를 얻으셔서 수정을 해주시면 됩니다.

검색 예 ) 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