onScroll event에 throttle을 적용하는 방법

[HyeongtaekOh]

pagination을 구현한 후, 스크롤 이벤트에 throttle을 적용하기 위해 코드를 다음과 같이 작성해봤는데 스크롤 이벤트 자체가 동작하지 않는데 이유를 모르겠습니다. lodash throttle 함수의 작동방식에 대해 조언을 구하고 싶습니다.

<div className='comments' 
     ref={scrollRef} 
     onScroll={() => throttle(handleScroll, 200)}>
        { comments.map((comment) => (
          <Comment
            key={comment.id}
            comment={comment}
          />
        ))}
</div>

const handleScroll = () => {
    if (scrollRef.current.scrollHeight - scrollRef.current.scrollTop - scrollRef.current.clientHeight < 10)
      paginateComments(localStorage.getItem('token'));
    console.log("event"); //이벤트 호출횟수 확인용
  }

[woohm402]

이래서 타입스크립트를 권장드립니다 ㅎ

lodash 오픈소스 뜯어볼게요 (커밋 7b62f878cc218c8e94e6efafa55cea6796b501f7 기준)

lodash의 throttle 함수는 세 가지 인자를 받아서 함수를 리턴합니다. 타입스크립트 식으로 쓰면 다음과 같습니다. (소스)

DebouncedFunc 는 여기 있는데, 실행할 수 있는 함수에 뭐 좀 더해서 돌려줍니다. 또한 ThrottleSettings는 여기 있네요

type lodash = (func: (...args: any) => any, wait?: number, options?: ThrottleSettings) => DebouncedFunc<T>

그래서 이 친구의 사용법이 보통 어떠냐면

const sayHello = () => {
  console.log('Hello World!');
}

const throttledHello = throttle(sayHello, 1000);

return <button onClick={throttledHello}>클릭</button>

위 코드를 보면 버튼을 클릭할 때마다 throttledHello 함수가 실행됩니다. throttledHello는 throttle이 반환한 특이한 함수를 가리키는데, 1000ms 동안은 콜백으로 받은 첫 번째 함수 (이 경우 sayHello) 를 한 번씩만 실행하는 함수입니다.

따라서 실행 결과 버튼을 아무리 클릭해도 sayHello 함수는 1초에 한번만 실행됩니다. 따라서 Hello World! 라는 string도 1초에 한번만 출력됩니다.

---

@HyeongtaekOh 님 코드를 보면 onScroll={() => throttle(handleScroll, 200)}> 라고 써 주셨습니다. 이 div element는 스크롤 이벤트가 발생할 시 () => throttle(handleScroll, 200) 함수를 생성하여 실행합니다. 이 함수가 실행되면 handleScroll이 throttle된 실행 가능한 함수 가 생성되어 반환됩니다.

하지만 그 함수를 실행한 적이 없으니 handleScroll 역시 실행될 리가 없습니다.

첨언드리자면, "그럼 이걸 실행하면 되겠구나!" 라는 아이디어로 onScroll={() => throttle(handleScroll, 200)()}> 이나 onScroll={(() => throttle(handleScroll, 200))()}>로 수정하시면 실행은 되는데 throttle 이 적용되지 않을 거예요 🥲

아무튼 답변이 되셨을까요?

[HyeongtaekOh]

오...! 이해했습니다, 해결된 것 같아요. 감사합니다!