잊을것 같으니 메모하자 - React resize 이벤트

반응형으로 웹을 개발하게 되면 항상 마주치는 녀석

 

윈도우 창 크기 조절하기

 

우선 가로 크기를 가지는 width 라는 state를 정의하고, window의 가로폭을 set해주는 함수를 만들자

const [width, setWidth] = useState<number>(0)

const resizeWindow = () => {
	setWidth(window.innerWidth)
}

그리고 윈도우 크기가 변경될때마다 호출되도록 useEffect 선언

useEffect(() => {
	window.addEventListener('resize', resizeWindow)
    return () => {
    	window.removeEventListener('resize', resizeWindow)
    }
})

반드시 이벤트를 제거해줘야하는데 그러지 않으면 메모리 손실이 발생할 수도 있고 다른 컴포넌트와 충돌이 발생할 수 있다.