현재 버전

킁킁탐정 // 답변 감사합니다.

클래스형에서는 해당 코드로 쓰는걸 알고 있는데, useRef도 결국 해당 이벤트 리스너로 가져와야하는군요.

 useEffect(() => {
    componentDidMount = () => {
      window.addEventListener("scroll", this.listenScrollEvent)};
    componentWillUnmount = () => {
      window.removeEventListener("scroll", this.listenScrollEvent)};
  })

  const listenScrollEvent = () => {
    if (window.scrollY > 220) {
      setFirstFeed({ firstFeed: true });
    }

    if (window.scrollY > 1000) {
      setSecondFeed({ secondFeed: true });
    }

    if (window.scrollY > 1750) {
      setThirdFeed({ thirdFeed: true });
    }

    if (window.scrollY > 2300) {
      setFourthFeed({ fourthFeed: true });
    }
  };

이렇게 짜는건 동료가 짠 코드 덕분에 저도 알고 있습니다.

하지만 useRef랑 연동해서 짜는 것을 잘 모르다보니 질문중입니다.

지금 말씀해주신 이벤트 리스너부분이 막혀서 어떻게 해야할지 모르겠습니다.

즉, componentDidmount와 componentWillMount 부분을 잘 모르겠습니다.

  useEffect(() => {
    setPoint(scroll.current.scrollTop)
    scroll.current.addEventListener("scroll", scrollHandler)
    scroll.current.removeEventListener("scroll", scrollHandler)
  });
  console.log(point);
  const scrollHandler = (e) => {
    if(point.scrollTop > 400) {
      point.scrollTopView(point.scrollTopView(0, 1600))
    }
    if(point.scrollTop > 1800) {
      point.scrollTopView(point.scrollTo(0, 3400))
    }
    if(point.scrollTop > 3600) {
      point.scrollTopView(point.scrollTo(0, 5100))
    }
    if (point.scrollTop > 5300) {
      point.scrollTopView(point.scrollTo(0, 6800))
    }
  };



수정 이력

2021-02-01 23:06:19 에 아래 내용에서 변경 됨 #2

킁킁탐정 // 답변 감사합니다.

클래스형에서는 해당 코드로 쓰는걸 알고 있는데, useRef도 결국 해당 이벤트 리스너로 가져와야하는군요.

 useEffect(() => {
    componentDidMount = () => {
      window.addEventListener("scroll", this.listenScrollEvent)};
    componentWillUnmount = () => {
      window.removeEventListener("scroll", this.listenScrollEvent)};
  })

  const listenScrollEvent = () => {
    if (window.scrollY > 220) {
      setFirstFeed({ firstFeed: true });
    }

    if (window.scrollY > 1000) {
      setSecondFeed({ secondFeed: true });
    }

    if (window.scrollY > 1750) {
      setThirdFeed({ thirdFeed: true });
    }

    if (window.scrollY > 2300) {
      setFourthFeed({ fourthFeed: true });
    }
  };

이렇게 짜는건 동료가 짠 코드 덕분에 저도 알고 있습니다.

하지만 useRef랑 연동해서 짜는 것을 잘 모르다보니 질문중입니다.

지금 말씀해주신 이벤트 리스너부분이 막혀서 어떻게 해야할지 모르겠습니다.

즉, componentDidmount와 componentWillMount 부분을 잘 모르겠습니다.

  useEffect(() => {
    let point = setPoint(scroll.current.scrollTop);
    scroll.current.addEventListener("scroll", scrollHandler)
    scroll.current.removeEventListener("scroll", scrollHandler)
  });
  console.log(point);
  const scrollHandler = (e) => {
    if(point.scrollTop > 400) {
      point.scrollTopView(point.scrollTopView(0, 1600))
    }
    if(point.scrollTop > 1800) {
      point.scrollTopView(point.scrollTo(0, 3400))
    }
    if(point.scrollTop > 3600) {
      point.scrollTopView(point.scrollTo(0, 5100))
    }
    if (point.scrollTop > 5300) {
      point.scrollTopView(point.scrollTo(0, 6800))
    }
  };


2021-02-01 22:46:28 에 아래 내용에서 변경 됨 #1

답변 감사합니다.

클래스형에서는 해당 코드로 쓰는걸 알고 있는데, useRef도 결국 해당 이벤트 리스너로 가져와야하는군요.

 useEffect(() => {
    componentDidMount = () => {
      window.addEventListener("scroll", this.listenScrollEvent)};
    componentWillUnmount = () => {
      window.removeEventListener("scroll", this.listenScrollEvent)};
  })

  const listenScrollEvent = () => {
    if (window.scrollY > 220) {
      setFirstFeed({ firstFeed: true });
    }

    if (window.scrollY > 1000) {
      setSecondFeed({ secondFeed: true });
    }

    if (window.scrollY > 1750) {
      setThirdFeed({ thirdFeed: true });
    }

    if (window.scrollY > 2300) {
      setFourthFeed({ fourthFeed: true });
    }
  };

이렇게 짜는건 동료가 짠 코드 덕분에 저도 알고 있습니다.

하지만 useRef랑 연동해서 짜는 것을 잘 모르다보니 질문중입니다.

지금 말씀해주신 이벤트 리스너부분이 막혀서 어떻게 해야할지 모르겠습니다.

즉, componentDidmount와 componentWillMount 부분을 잘 모르겠습니다.

  useEffect(() => {
    let point = setPoint(scroll.current.scrollTop);
    scroll.current.addEventListener("scroll", scrollHandler)
    scroll.current.removeEventListener("scroll", scrollHandler)
  });
  console.log(point);
  const scrollHandler = (e) => {
    if(point.scrollTop > 400) {
      point.scrollTopView(point.scrollTopView(0, 1600))
    }
    if(point.scrollTop > 1800) {
      point.scrollTopView(point.scrollTo(0, 3400))
    }
    if(point.scrollTop > 3600) {
      point.scrollTopView(point.scrollTo(0, 5100))
    }
    if (point.scrollTop > 5300) {
      point.scrollTopView(point.scrollTo(0, 6800))
    }
  };