죄송합니다초보입니다
40
2021-07-22 12:01:03
2
88

리액트 스크롤 모달 질문드립니다 ㅠ


어제 스크롤 관련해서 질문드렸는데

다른 이벤트는 해결이 됐는데 모달 띄우는게 해결이 안되네요..

어느정도 스크롤을 내렸을때 모달이 떠야해서


const [closeModal, setCloseModal] = useState(false)
style={{ display: closeModal ? "flex" : "none" }
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
let mounted = true;
window.addEventListener('scroll', () => {
if (mounted) {
setScrollY(window.pageYOffset);
setLoading(false);
}
});
return () => {
mounted = false;
}
}, []);

이렇게 해서 state값이 false 일 경우, 모달 안보임, true일때 모달이 뜨게

해당 div에  설정하고 scrollY값을 구했습니다.

const openModal = () => {
if (scrollY>=500) {
setCloseModal(true)
}
}
useEffect(() => {
window.addEventListener('scroll', openModal)
return () => window.removeEventListener('scroll', openModal)
},[])

그리고 이렇게해서 스크롤하면 불린값을 바꿔서 모달을 띄우려고하는데.. 

콘솔값을 보면 closeModal값은 계속 false이고, scrollY값만 바뀌고 있네요 ㅠㅠ

무엇이 문제일까요?

0
  • 답변 2

  • 183183
    15
    2021-07-22 13:36:05

    함수형으로 openmodal 호출해보시면 .. () => {openModal} 

  • LostStarz
    143
    2021-07-23 01:56:35 작성 2021-07-23 01:59:45 수정됨


    useEffect(() => {
       window.addEventListener('scroll', openModal)
       return () => window.removeEventListener('scroll', openModal)
       },[])

    여기는 처음 마운트 시에만 실행되니까 openModal에서 참조하는 scrollY값이 항상 초기값에서 변경되지 않는것 같습니다.


      useEffect(() => {
        window.onscroll = openModal;
        return () => window.removeEventListener("scroll", openModal);
      }, [scrollY]);


    addEventListener로 이벤트 등록하면 여러개 등록될 것같아서 onscroll로 바꿧고 디펜던시에 scrollY추가했습니다.


    근데 이게 스크롤 내릴때마다 호출되니까 성능상으로는 보완하면 좋을 것같습니다

    디바운싱, 쓰로틀링 같은 걸 적용하면 좋을 것 같은데. 그것은 저도 잘 몰라서ㅋㅋ

  • 로그인을 하시면 답변을 등록할 수 있습니다.