TIL #79 | window 너비에 따라 state 변경하기

반응형 CSS를 구현하면서 윈도우 너비에 따라 탭메뉴가 보이지 않아야 하는 상황이 생겼다.
좁은 화면에선 탭이 보이고 넓은 화면에선 탭이 보이지 않도록 resize와 debounce를 이용해 구현해보았다.

1. window 너비에 따른 setState
   일단 기본적으로 window.innerWidth를 이용해서 아래와 같이 간단하게 state를 변경할 수 있다.

  useEffect(() => {
    if (windowSize.width >= 1024) {
      setIsShownCategory(false)
    }
  }, [windowSize.width])

하지만 위와 같이 되면 너비값이 달라질 때마다 불필요한 호출이 많이 일어나게 된다. 이를 해결하기 위해 debounce를 설정해주기로 했다.

2. debounce

lodash의 debounce를 사용했다.

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

const useResizeDebounce = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  })

  useEffect(() => {
    const handleResize = debounce(() => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }, 300)

    window.addEventListener("resize", handleResize)

    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  return windowSize
}

export default useResizeDebounce

이렇게 debounce까지 설정해주면 불필요한 호출 없이 변경될 때 0.3초 동안 마지막 사이즈로 실행되어 state가 변경된다.