문제 배경

커스텀 명언 카드 생성 화면에서 QuotesStyler 컴포넌트 내부의 input 요소가 onChange 이벤트로 상태를 즉시 업데이트하고 있었고, 이는 Zustand 상태를 통해 캔버스를 리렌더링하는 구조였다. 모바일 환경에서 사용자 입력이 많아질수록 이벤트 호출이 과도하게 발생해 화면 지연과 성능 저하가 발생했다.

개선 방법

• **디바운싱(debouncing)**을 적용하여 타이핑 도중 발생하는 불필요한 상태 업데이트를 지연시켰다.

• 외부 라이브러리 의존성을 줄이기 위해 클로저를 활용해 직접 디바운스 함수를 구현했다.

  => debounce() 함수는 내부에 timerId를 클로저로 유지하며, 연속 입력 중 이전 타이머를 취소하고 마지막 입력 이후 일정 시간(500ms)이 지나면 상태를 갱신하도록 구성했다.

'use client'

export default function QuotesSizeStyler({ selectTapNum }: PropsType) {

   // 디바운스 클로저
  function debounce(){
    let timerId: NodeJS.Timeout;
   
    return function (newValue: number, targetName:string, delayTime:number) {
      clearTimeout(timerId)

      timerId = setTimeout(()=>{
        setState({...state, [targetName]:newValue})
      }, delayTime)
    }
  }

  // 디바운스 함수 호출 : debonce 함수의 클로저 반환하고 이를 활용.
  const debounceClozer = debounce()
   
  return (
          {/* 캔버스 넓이 */}
        <input
          onChange={(e) => {
            const width = Number(e.currentTarget.value)
            debounceClozer(width, 'width', 500)
          }}
        ></input>
  )
}

[참고] 디바운싱 적용 전 후 비교

성과 및 배운점

성과

• 리렌더링 빈도 감소 및 사용자 경험 향상

  타이핑 중에도 상태 변경이 500ms 지연되어 발생함으로써, 불필요한 연산을 줄이고 모바일에서도 버벅임 없이 작동하게 되었다.

• 경량화 및 유지보수성 확보

  외부 라이브러리 없이 구현함으로써 번들 크기 증가 없이 기능을 구현했으며, 프로젝트 전반의 의존성을 줄일 수 있었다

배운점

• 디바운싱 기술 자체보다, 상태 변경의 타이밍을 조절하는 문제 해결 전략으로 접근한 점이 의미 있었다.
• 클로저 사용이 메모리 상 변수 참조를 유지하는 특성상 남용 시 성능 저하를 유발할 수 있기에, 상황에 따라 스로틀링(throttling) 등 다른 방법과의 비교 적용이 필요함을 느꼈다.