[공지사항] 푸샤 깃허브 블로그 업데이트 사항

lodash

lodash는 자바스크립트 라이브러리로 underscore 또는 lodash는 한 번 정도 들어봤을 정도로 많이 사용되는 필수 라이브러리 중 하나 입니다. lodash는 여러가지 유용한 유틸리티 기능을 제공하며 특히 컬렉션 데이터(데이터 군집)를 컨트롤하는데 매우 쉽고 편리하게 사용할 수 있도록 도와줍니다. 그래서 프론트엔드 환경에서 많이 쓰입니다.

debounce()

  • 특정 함수가 여러번 반복 실행될 경우, 정해진 지연시간동안 반복된 호출을 마지막에 딱 1번만 호출하도록 제어해준다.

사용법

호출하고자 하는 함수를 첫 번째로 인자로 넣고, 지연시간을 두 번째로 인자로 넣는다.

_.debounce(function () {}, 1000(ms));

예제

window resize 이벤트가 발생했을 때, resize 이벤트가 1초 내에 다시 발생하지 않을 경우 콘솔에 로그를 찍는 코드이다.

window.onresize = _.debounce(() => {
  console.log("window resize가 끝났습니다.");
}, 1000);

혹은 리액트에서 메뉴 등 Hover가 있는 이벤트에서 onMouseEnter에 debounce() 함수를 활용할 수 있다.

import React, { useState } from "react";
import { debounce } from "lodash";

export default function App() {
  const [isHovered, setIsHovered] = useState(false);
  console.log(isHovered);

  const debouncedHandleMouseEnter = debounce(() => setIsHovered(true), 500);

  const handlOnMouseLeave = () => {
    setIsHovered(false);
    debouncedHandleMouseEnter.cancel();
  };

  return (
    <div
      onMouseEnter={debouncedHandleMouseEnter}
      onMouseLeave={handlOnMouseLeave}
    >
      hover me
    </div>
  );
}
  • 만약 debounce말고 setTimeout() 함수를 이용한다면, delay만 시킬 뿐이니 꼭 onMouseLeave 이벤트 함수에 clearTimeout() 함수를 잊지말자! 그래야 마우스가 잠시 머무는 동안의 시간을 clear 시킬 수 있다.
import React, { useRef } from "react";

const Menu = () => {
  const timerRef = useRef(null);

  const onMouseEnter = () => {
    timerRef.current = setTimeout(() => {}, 1000);
  };

  const onMouseLeave = () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };

  return <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />;
};

사용했던 경험

프론트에서 Menu Hover, input 등 여러번 발생하는 이벤트들은 리렌더링이 일어나면서 성능에 좋지 않다. 예를 들어 <input> 의 onChange 이벤트나 여러개의 메뉴를 클릭할 때 발생하는 onMouseMove 나 onMouseHover 등등 여러 번 발생하는 이벤트들을 딱 한번만 실행하고 싶을 때, debounce 함수를 활용하면 된다.

요약

  • 1.
  • 2.
  • 3.

참고 영상

참조 문서 및 사이트

상단으로 푸샤 깃허브 이동

댓글남기기

참고