useRef onWheel 이벤트 적용시 오류 발생

Question

마우스 휠 이벤트 발생 시 위 아래로 페이지를 이동시키려고 합니다. (ref의 scrollIntoView 메소드 사용)다음과 같이 엘리먼트 목록에 이벤트와 ref를 설정한 후 실행을 해보았지만Cannot read properties of undefined (reading 'scrollIntoView') 오류가 발생합니다.어떻게 해결해야 할까요iport { styled } from "styled-components" import { useEffect, useRef, useState } from "react" const PageContainer = styled.div` width : 1440px; height : 900px; ` const Page = styled.div` width : 1440px; height : 810px; ` export default function Brand(){ const scrollRef = useRef([]); const [page, setPage] = useState(1); const handleScroll = (ref : HTMLDivElement) => { ref.scrollIntoView({behavior : "smooth"}) }; const moveY = (e : React.WheelEvent) => { if(e.deltaY === 0) return; else if(e.deltaY > 0){ setPage(page+1); } else if(e.deltaY < 0){ setPage(page-1) } handleScroll(scrollRef.current[page]); } return( {scrollRef.current[0] = el}} style={{backgroundColor :"#85CBA8"}}> {scrollRef.current[1] = el}} style={{backgroundColor :"#8176B5"}}> {scrollRef.current[2] = el}} style={{backgroundColor :"#BA7781"}}> {scrollRef.current[3] = el}} style={{backgroundColor : "#F16975"}}> {scrollRef.current[4] = el}} style={{backgroundColor : "#F69259"}}> ) }// 다음과 같이 수정 진행하였습니다.그런데도 동작되지 않습니다.const moveY = (e : React.WheelEvent) => { if(page === 0 || page === 6){ console.log(page) return; } if(e.deltaY === 0) return; else if(e.deltaY > 0){ setPage(page+1); } else if(e.deltaY < 0){ setPage(page-1) } scrollRef.current[page].scrollIntoView({behavior : "smooth"}); };

codezzzz · Answer

useRef onWheel 이벤트 적용시 오류 발생

1개의 답변

Q&A 목록