var [count, setcount] = useState(0);
// count 값으로 use Effect 설정 < 변할때만
const Ref = useRef([]);
// Ref 으로 잡는다 ( querySElector 라고 생각)
// 스크롤 하는거 에 따라 보여주는 페이지 다르게
const hh = function () {
if (count == 0) {
Ref.current[1].scrollIntoView({ behavior: "smooth" });
setcount(1);
}
else if (count == 1) {
Ref.current[2].scrollIntoView({ behavior: "smooth" });
setcount(2);
}
}
const h1 = function () {
if (count == 1) {
setcount(0);
Ref.current[0].scrollIntoView({ behavior: "smooth" });
}
else if (count == 2) {
setcount(1)
Ref.current[1].scrollIntoView({ behavior: "smooth" });
}
// else if( count==)
}
//
useEffect(() => {
window.addEventListener('wheel', (e) => {
e.preventDefault();
console.log(e.deltaY);
// 스크롤을 위로 하면 150 아래로 하면 고정값 -150을 보여줌
if (e.deltaY == 150) {
hh();
// 함수 실행!
}
else if (e.deltaY < 150) {
h1();
}
}, { passive: false })
return () => {
window.removeEventListener('wheel', hh)
// 한번사용한 이벤트 는 이벤트 중복 피하기 위해 remove 함
};
}, [count])