[react] react의 scroll 이벤트 사용법

[react] react의 scroll 이벤트 사용법

 

react hooks에서 스크롤 이벤트

사용법입니다.

 

지난 포스팅에서 useEffect 안에서 scroll으로 인한 렌더링 문제에 관해 다룬 적이 있었는데,
오늘은 react에서 스크롤 이벤트를 사용하는 방법을 공유하고자 합니다.
혹시 다른 의견이나 방법이 있으시면 댓글로 알려주세요.

구현하고자 하는 기능은 일정 높이 이상의 스크롤 이전과 이후로
컴포넌트를 스위치하여 view를 다르게 구현하는 것입니다.

하지만 react에서 scroll 이벤트를 거는 것이 생각보다 안되는 것이 많았습니다. 하나씩 살펴보겠습니다.

 

react에서 구현안되는 코드

1. useRef를 이용한 돔 접근 후 ref.current.addEventListender 이용해 걸기

-> 오류메시지: addEventListender property를 찾을 수 없음

 

2. useRef를 이용한 돔 접근 후 ref.current.scrollY 로 해당 요소의 스크롤 위치 찾기

-> 오류메시지: 위와 같은 오류로 console로 찍으면 undefined 나옴

위와 같은 이유로 useRef를 이용한 스크롤 이벤트 걸기 포기

 

3. 요소에 onScroll 이벤트 걸기

react return 코드 내 요소에 <div onScroll={e => console.log(e.target.scrollY)}> .... </div>를 테스트해 보았는데 
역시 onScroll 이벤트 감지를 전혀하지 못하였습니다. 

 

최종 사용 코드

import React, { useState, useEffect, useMemo } from 'react';
import { throttle } from 'lodash';

const Example = () => {
  const [scrollEvent, setScrollEvent] = useState(false)

  const onScrollFn = useMemo(() => throttle(() => { 800ms마다 onScrollFn 내 함수 작동 
    if (window.scrollY > 60) { //스크롤 높이 60이상시
      setScrollEvent(true) //useState를 이용하여 view 컨트롤
    } else {
      setScrollEvent(false)
    }
  }, 800), [])

  useEffect(() => {
    window.addEventListener('scroll', onScrollFn) //컴포넌트 최초 렌더링 후 작동
    return () => { //컴포넌트 나갈 때 작동
      window.removeEventListener('scroll', onScrollFn)
    }
  }, [])

  return ( ... );
};

export default Example;

 

• useEffect 안에 렌더링 후 1번 실행되는 scroll 이벤트가 설정
• scroll 이벤트가 있을 때마다 onScorllFn 함수를 불러 함수 내의 코드 실행  
• 나갈때 removeEventListner로 onScorllFn을 제거
• 여기서 발생되는 리렌더링 문제로 lodash의 throttle로 렌더링 시작을 지연시키고, useMemo로 최적화 처리 
• 리렌더링 오류 문제는 아래 포스팅 참조
• https://goddino.tistory.com/312

[react] useEffect 안에서 scroll으로 인한 렌더링 문제