useEffect를 이용한 debounce, throttle 처리

디바운싱이란?
- 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 작업

  useEffect(() => {

    // useEffect가 작동할때마다 타이머가 최신화되어 마지막 작업 이후 타이머만이 작동하게 됨.

    const timersName = setTimeout(() => {

      setFormIsValid(

        enteredEmail.includes('@') && enteredPassword.trim().length > 6,

      )

      // 디바운싱

    }, 500)

    return () => {

      clearTimeout(timersName)

    } // 클린업 함수

  }, [enteredEmail, enteredPassword])

return 을 통한 디바운싱 구현

- setTimeout을 통해 이벤트가 발생하는 것을 return에서 clearTimeout을 시킴으로써 시간 안에 다음 이벤트가 발생하면 그 이벤트를 지우고 있다.

쓰로틀링이란?
- 이벤트 발생 후 일정 주기를 주어 그 주기동안은 이벤트가 발생하지 않도록 하는 것

import React, { useState, useEffect } from 'react'

import './styles.css'

export default function App() {

  const [page, setPage] = useState(10)

  const [books, setBook] = useState([])

  const [throttle, setThrottle] = useState(false)

  const handleScroll = () => {

    if (throttle) return

    if (!throttle) {

      setThrottle(true)

      setTimeout(async () => {

        if (page >= 50) setPage(page)

        else setPage((page) => page + 5)

        setThrottle(false)

      }, 1000)

    }

  }

  useEffect(() => {

    setBook(Array.from({ length: page }, (_, idx) => idx + 1))

  }, [page])

  return (

    <div className="book" onScroll={handleScroll}>

      <div>

        {books.map((page, idx) => (

          <div className="page" key={idx}>

            {page}

          </div>

        ))}

      </div>

    </div>

  )

}

뭐가 문젠데?
- state로 관리되고 있는 input창의 값에 대한 처리(유효성 검사, 노션의 자동완성)를 할 때에 너무 많은 이벤트 호출을 방지(디바운싱)
- 무한 스크롤 : 스크롤을 내릴때 주어진 시간마다 스크롤의 위치를 확인하고 api 요청

 

useEffect와 useState를 활용하여 내가 원하는 시점에서 이벤트 관리하는 것이 중요하다. 

불필요한 이벤트 발생을 방지하기 위해 디바운싱과 쓰로틀링 작업이 필요할 것으로 생각된다.