[코드 스테이츠 / Final-Project] 150일차, "메인페이지 디테일 살리기"

resize 이벤트

window 에 scroll 처럼 resize 라는 이벤트가 존재한다. 브라우저의 넓이가 달라지는 이벤트를 가리킨다. 내 메인 페이지는 모바일일 때, 태그의 위치 순서가 바뀐다. 그런데 브라우저의 사이즈를 줄이다 보면 모바일 사이즈 768px 이 됐을 때 딱 바뀌지 않고 스크롤 이벤트가 한 번 발생하면 그제서야 바뀌었다. 다시 말하면, 모바일 사이즈가 됐음에도 불구하고 별다른 이벤트가 발생하거나 렌더링 되는 요소가 없다고 하면 계속 데스크탑인 상태의 태그 순서로 존재하게 되는 것이었다. 이 문제를 해결하기 위해 딱 알맞은 이벤트가 resize 이벤트였다. 그리고 초기에는

 

isMobile = window.matchMedia('screen and (max-width: 768px)').matches 

 

이렇게 설정했었는데, isMobile 을 state 로 관리를 해주고, resize 이벤트가 발생할 때마다 모바일 화면 사이즈인지 아닌지를 boolean 값으로 넣어주었더니 잘 해결되었다.