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

하태현·2021년 12월 24일
0

React

목록 보기
8/11
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
}
profile
왜?를 생각하며 개발하기, 다양한 프로젝트를 경험하는 것 또한 중요하지만 내가 사용하는 기술이 어떤 배경과 이유에서 만들어진 건지, 코드를 작성할 때에도 이게 최선의 방법인지를 끊임없이 질문하고 고민하자. 이 과정은 앞으로 개발자로 커리어를 쌓아 나갈 때 중요한 발판이 될 것이다.

0개의 댓글