리액트 검색

elice 프로젝트 마지막 주차에 접어 들기 직전, 팀원 한 분이 검색 기능을 구현했다. 정말 대단한 개념들을 적용해서 구현하니 너무 멋져 보였다..

그래서 무한 스크롤과 검색에서 쓰인 디바운싱과 쓰로틀링에 대해 따로 정리를 해보기 위해 블로그를 쓴다.

검색

검색을 할 때 자동완성 기능을 봤을 것이고, 리액트를 이용해서 처음 input 이벤트를 관리한다면 대게 이렇게 할 것이다.

const = onChange(e) => {
	setInputValue(cur => e.target.value)
}

그렇다면 내가 글자 하나를 입력할 때마다 상태 변수가 업데이트 될 것이다. 만약 로컬에 저장하는게 아니라 서버에 데이터를 보내게 된다면 어떻게 될까.

글자 하나하나 입력 마다 서버에 요청을 보내고 받고를 반복할 것이다.

지금이야 프로젝트를 하는 것이기 때문에 어떤 성능에 문제를 일으키는 일은 거의 없을 것이다. 하지만 '어물쩡'넘어가게 되면 다시 공부할 수 있을까? 아니라고 생각한다.

어려운 개념을 적용해준 팀원에게 너무 고맙고, 항상 갓이라고 부르고 있다. 정말 감사하다.

디바운싱

일단 직관적으로 어떻게 해야 검색을 할 때 서버에 요청을 최소로 할 수 있을까.

글자를 입력을 멈췄을 때 서버에 요청을 보내면 어떨까? 유저가 검색을 위해 키보드를 두드리는 것을 멈췄을 때 서버에 요청을 보내면 최악의 상황은 면할 수 있지 않을까 생각한다.

그럼 유저가 언제 그만둘지 어떻게 아는가?

유저가 입력을 할 때마다 Timer를 설정하면 나름 간단하게 구현이 가능하다!

const [timer, setTimer] = useState(null)
const = onChange(e) => {
	setInputValue(cur => e.target.value)
  if(timer) clearTimeout(timer)
  const debounce = setTimeout(async () => {
    try{
  		const 서버요청 = await get("")
    } catch(e) {
    	setIsError(e)
    }
  }, 300)
  setTimer(debounce)
}

setTimeout만으로 간단하게 디바운싱을 적용할 수 있다.

구현은 타이머 작동, 타이머 제거지만 이를 활용하는 것은 서비스에 큰 영향을 줄 수 있다. 더 자세하게 공부를 할 필요를 느끼고, 프로젝트가 끝나면 내가 직접 구현을 해보자!

쓰로틀링

디바운스와 비슷해 보이지만 쓰로틀링은 일정 시간동안 아예 호출되지 않도록 하는 것이다.

그렇다면 스크롤 이벤트를 처리할 때 아주 유용하게 사용될 수 있다.

무한 스크롤 혹은 윈도우 resize를 할 때 무수히 많은 이벤트가 발생하는데, 이때 성능을 끌어올릴 수 있는 것이 쓰로틀링이다.

const [timer, setTimer] = useState(null)
const = onChange(e) => {
	setInputValue(cur => e.target.value)
  if(!timer){
    const throttling = setTimeout(async () => {
      try{
          const 서버요청 = await get("")
      } catch(e) {
          setIsError(e)
      }
    }, 300)
  
  	setTimer(debounce)
  }
}

단어는 어렵지만 막상 자바스크립트 기본 문법으로 구현이 가능하니, 서비스의 디테일을 높이기 위해 꼭 필요한 기술이라고 생각이 든다.