[Next.js] window.innerWidth 가져오는 커스텀 훅 만들기

Next.js는 SSR을 기본으로 하기 때문에

서버에서 렌더링하는 시점에 window를 가져다 쓸 수 없다

따라서 window.innerWidth도 바로 쓸 수 없게 되는데

커스텀 훅을 통해서 window에 접근할 수 있는 방법이 있다

---

import { useState, useEffect } from 'react'

const useInnerWidth = () => {
  const [innerWidthVal, setInnerWidthVal] = useState<number>(0)

  useEffect(() => {
    setInnerWidthVal(window.innerWidth)
    const handleResize = () => {
      setInnerWidthVal(window.innerWidth)
    }

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return innerWidthVal
}

export default useInnerWidth

• useEffect() 를 통해서 window.innerWidth에 접근하고
• 컴포넌트가 mount 됐을 때, 이벤트 핸들러를 통해서 적용하고
• 컴포넌트가 unmount 됐을 때, 이벤트를 제거하는 식으로 동작시키면 에러 없이 window 객체에 접근할 수 있다.