[hooks]브라우저 크기 변경 할때마다 size 측정

import {useLayoutEffect, useState} from 'react'

export default function useWindowSize() {
  const [size, setSize] = useState([0, 0])
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight])
    }
    window.addEventListener('resize', updateSize)
    updateSize()
    return () => window.removeEventListener('resize', updateSize)
  }, [])
  return size
}

// 퍼포먼스에 영향을 미치는 동작을 제어하기 위해 디바운스를 적용
import {useLayoutEffect, useState} from 'react'

export default function useWindowSize() {
  const [windowSize, setWindowSize] = useState()

  useLayoutEffect(() => {
    if (!windowSize) setWindowSize([window.innerWidth, window.innerHeight])

    let resizeTimer
    const windowSizer = () => {
      clearTimeout(resizeTimer)
      resizeTimer = setTimeout(() => {
        setWindowSize([window.innerWidth, window.innerHeight])
      }, 300)
    }
    window.addEventListener('resize', windowSizer)

    return () => {
      window.removeEventListener('resize', windowSizer)
    }
  }, [windowSize])

  return windowSize
}