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

오늘의 한 일

• debouncing 왜 안되는지 물어보기
• 토스트 앱 구현 (챌린지반 과제)
• 지출 관리 앱
  • contextAPI를 활용한 모달창 구현

custom Debouncing 만들기

문제

  const customDebounce = (func, time = 30000) => {
    let timer;
    const debounce = () => {
      clearTimeout(timer);
      timer = setTimeout(() => func(), time);
    };

    return debounce;
  };

  const debounceMemoInput = customDebounce((value) => {
    dispatch({
      type: UPDATE_MEMO,
      payload: value,
    });
  }, 350);

  const handleChange = ({ target }) => {
    debounceMemoInput(target.value);
  };

• debounce 라이브러리를 활용할 때에는 동작이 잘 되었는데 customDebounce를 제작한 후에는 동작하지 않는다...
• 함수를 return하다 보니 구조가 자꾸 헷갈린다.

문제해결

const debounce = (value) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(value), time);
    };

• debounceMemoInput = debounce이기 때문에 debounce에도 value를 props로 받을 필요가 있엇다.

오늘의 회고