Next.js에서의 소음 제거

React v16.8의 useEffect를 사용하여 Next.js에서 비용이 많이 드는 작업 디바운싱하기

React v16.8은 함수형 컴포넌트에서 부수 효과를 실행할 수 있도록 하는 useEffect라는 새로운 훅을 도입했습니다. useEffect는 API 호출과 같은 비용이 많이 드는 작업을 처리하는 좋은 방법이지만, 약간의 작업이 필요할 수 있습니다. 이 글에서는 Next.js에서 useEffect를 사용하여 비용이 많이 드는 작업을 디바운싱하는 방법을 보여드리겠습니다.

디바운싱이란 무엇일까요?

디바운싱은 함수가 호출되는 속도를 제어하는 기술입니다. 예를 들어, 사용자가 입력을 멈출 때만 실행하고 싶은 비용이 많이 드는 작업이 있을 때 유용합니다. 이 경우 사용자가 특정 시간 동안 입력을 멈출 때만 API 호출을 디바운싱하여 수행할 수 있습니다.

useEffect

useEffect는 함수형 컴포넌트에서 부수 효과를 실행할 수 있도록 하는 훅입니다. 클래스 컴포넌트의 componentDidMount와 componentDidUpdate와 유사합니다. 첫 번째 인수는 컴포넌트가 마운트되거나 업데이트될 때 호출되는 함수입니다. 두 번째 인수는 종속성 배열입니다. 종속성이 변경되면 해당 함수가 다시 호출됩니다. 배열이 비어 있으면 해당 함수는 컴포넌트가 마운트될 때만 호출됩니다.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('This will be called when the component mounts')
  }, [])

  useEffect(() => {
    console.log('This will be called when the component mounts and when the dependencies change')
  }, [dependency1, dependency2])

  return <div>Hello world</div>
}

Next.js에서 디바운싱하는 방법

먼저 디바운싱을 처리할 커스텀 훅을 만들어야 합니다. 간단한 예는 다음과 같습니다.

import { useState, useEffect } from 'react'

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

  return debouncedValue
}

이 훅은 디바운싱할 값과 지연 시간(밀리초 단위)의 두 가지 인수를 받습니다. 디바운싱된 값을 반환합니다. 이 훅은 useEffect를 사용하여 지정된 지연 시간 후에 디바운싱된 값을 업데이트하는 타임아웃을 설정합니다. 또한 값이나 지연 시간이 변경되면 타임아웃을 정리하는 정리 함수를 생성합니다.

이제 값을 디바운싱할 수 있는 훅이 생겼으므로 이를 사용하여 API 호출을 디바운싱할 수 있습니다. 예를 들어 다음과 같습니다.

import useDebounce from './useDebounce'

export default function Search() {
  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  useEffect(() => {
    if (debouncedSearch) {
      fetch(`/api/search?q=${debouncedSearch}`)
    }
  }, [debouncedSearch])

  return <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
}

이 컴포넌트는 사용자가 500밀리초 동안 입력을 멈추면 /api/search로 API 호출을 수행합니다. 디바운싱은 입력 필드의 값을 쿼리 문자열로 사용하여 API 호출을 수행합니다.

성능

디바운싱은 Next.js에서 비용이 많이 드는 작업을 처리하는 저렴한 방법입니다. 추가 종속성이 필요하지 않기 때문에 lodash.debounce와 같은 라이브러리를 사용하는 것보다 저렴합니다. 또한 추가 코드를 번들로 묶을 필요가 없기 때문에 react-throttle과 같은 라이브러리를 사용하는 것보다 저렴합니다.

결론

디바운싱은 함수가 호출되는 속도를 제어하는 데 유용한 기술입니다. 사용자가 입력을 멈출 때만 실행하고 싶은 비용이 많이 드는 작업이 있을 때 유용합니다. 이 글에서는 useEffect를 사용하여 Next.js에서 비용이 많이 드는 작업을 디바운싱하는 방법을 보여드렸습니다.

이 글이 마음에 드셨다면 JavaScript Hashmap, Performant and Simple도 좋아하실 수 있습니다.