[React] 브라우저 크기 감지, throttle, debounce

바로 직전 포스팅에서 antd 그리드를 이용해서 브라우저 화면 사이즈에 따라 반응하는 페이지를 만들어 보았다. 정확히 768px에 바뀌는지 보려고 현재 화면의 너비를 리액트 컴포넌트에 띄워주려고 한다.

 

1. resize 이벤트

resize 이벤트는 document view의 크기가 변경될 때 발생한다. 이벤트가 발생할 때마다 width state에 브라우저의 너비가 저장되도록 했다. useEffect를 이용해서 컴포넌트가 마운트 될 때 해당 함수를 실행한다.

 

const [width, setWidth] = useState(window.innerWidth);

const handleResize = () => {
  setWidth(window.innerWidth);
};

useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
        // cleanup
        window.removeEventListener("resize", handleResize);
    };
}, []);

useEffect의 deps에 빈 배열을 전달하면 컴포넌트가 언마운트 될 때 cleanup 함수를 실행한다. 메모리 누수를 방지하기 위해 이벤트를 꼭 제거해준다. width state의 값이 바뀔 때마다 컴포넌트가 새로 렌더링되어서 보여진다.

 

 

2. Throttle

1px이라도 브라우저의 너비가 달라지면 감지해서 컴포넌트를 새로 렌더링한다. 이렇게 불필요한 작업을 줄이기 위해 throttle로 함수의 호출 횟수를 조절할 수 있다. throttle은 여러번 연속해서 생기는 이벤트를 주기적으로 한번씩만 발생하도록 하는 기술이다. npm에서 lodash를 설치하고 throttle을 import 해온 후에 사용한다.

 

const handleResize = throttle(() => {
    setWidth(window.innerWidth);
}, 200);

handleResize가 연속으로 호출되어도 0.2초마다 한번씩만 실행된다.

 

 

3. Debounce

debounce도 throttle과 마찬가지로 이벤트 호출을 제어하는 기술이지만 약간 다르다. 연속해서 호출되는 함수 중에서 마지막으로 호출된 것만 실행시킨다.

 



똑같이 lodash에서 debounce를 import 해온 후에사용한다.

const handleResize = debounce(() => {
    setWidth(window.innerWidth);
}, 200);

 

매 입력이 끝난 200ms 동안 동일한 이벤트가 계속해서 발생 한다면 입력이 끝날때가장 마지막 이벤트만을 실행한다.

 

 

검색창에 한자 한자 입력할 때마다 api 요청을 보내는 것을 막을때, 사용자가 실수로 요청을 보내는 버튼을 두세번 눌렀을 때 등, 프론트단에서 서버로 api 요청을 연속적으로 보내는것을 방지할 때 유용하게 사용할 수 있다.

 

참고1 참고2 참고3