DOM의 크기를 감시해보자!
DOM의 크기 변화를 감지해야하는 상황은 그렇게 많지는 않다. 하지만 언젠가는 필요할 때가 있다. 당연하게도 이런형태의 옵저버가 있다는 것은 아무리 미디어쿼리로 처리를 한다고 해도 한계가 있으니 스크립트에서 구현 하는 것밖에는 답이 없는 상황이던가, 미디어쿼리로 처리하는 것보다 스크립트에서 간단하게 처리가 되는 경우도 있다고 볼수 있을 것이다.
ResizeObserver의 적용 방법은 매우 간단하다. ResizeObserver 객체를 생성하면서 변경시 처리할 콜백 함수를 제공하고, 해당 객체로 감지한 DOM을 observe 해준다.
이렇게만 하면 완료가 된다. 간단하게 예제 하나만으로 사용 법을 다 익힐 수가 있으니 아래의 코드를 확인해보자.
예제 코드를 보면 정말로 별거 없는 코드이다. 하지만, ResizeObserver를 사용 하지 않고 옛날 코드스타일 대로 해당 기능을 구현한다고 생각하면, 꽤나 귀찮은 작업이면서 성능도 떨어질 것이므로 소개를 해보았다.
옛날코드 다시읽기 소재로 나중에 한번 옛날 코드를 소개해줄 기회가 있을지도 모르겠다.
댓글
댓글 쓰기