[TIL] 내일배움캠프 React 과정 2024.05.29

오늘의 한 일

• 코딩 테스트 연습
  • 옹알이 (다음에 다시 풀 것!)
• 챌린지반 수업
  • zustand
  • context API
  • modal
• 메모 앱
  • 커스텀 debounce 훅 만들기
• 라이브 특강
  • 좋은 개발자의 비밀

Debounce vs Throttle

Debounce와 thirottle은 시간이 지남에 따라 함수 실행을 허용하는 횟수를 제어하는 유사하지만 다른 기술이다.

Debounce (디바운싱)

• 연속적으로 발생한 이벤트를 하나로 처리하는 방식이다.
• 주로 처음이나 마지막으로 실행된 함수만을 실행한다.

구현코드

  const debounceMemoInput = useCallback(
    debounce((value) => {
      dispatch({
        type: UPDATE_MEMO,
        payload: value,
      });
    }, 1000),
    []
  );

• 라이브러리를 사용하여 구현하였다.
• useCallback을 사용하여 debounce가 계속 호출되는 것을 방지하였다.

debounce 적용 전

debounce 적용 후

debounce의 사용 예시

• 키워드 검색 혹은 자동완성 기능에서 api 함수 호출 횟수를 최대한 줄이고 싶을 때 사용한다.
• 사용자가 창크기 조정을 멈출때까지 기다렸다가 resizing Event를 반영하고 싶을 때 사용한다.

Throttle (쓰로틀링)

• 스로틀링은 출력을 조절한다는 의미로 이벤트를 일정주기마다 발생하도록 하는 기술
• 100ms 를 준다면 이벤트는 100ms 동안 최대 한번만 발생하게 된다.

throttle의 사용 예시

• 스크롤에 많이 사용한다.
  • 모든 스크롤을 기록하면 성능문제가 있으므로 특정 시간마다 스크롤의 위치를 기록한다.