Media query 대체 가능한 Resize Observer

개요.

media query 가 css 에서 쓰이는 것이 한정이라면, 이 observer 의 경우, javascript 에서 사용하는 방식이다. js css라 불리는 부류의 일종으로 분류 될 수 있겠다.

 

특징.

html 에서 style tag 로 css 를 허가하는 것과 달리, 다음과 같이 사용 된다.

const container = document.querySelector(".container")

const observer = new ResizeObserver(entries => {
	const containerFactor = entries[0]
    const isSmall = containerFactor.contentRect.width < 150
    containerFactor.target.style.backgroundColor = isSmall ? "blue" : "red"
})

observer.observer(container)

다만 observer 의 const 변수 항목 부문에서 결국엔 style 로 적용이 되는 점이 있다.

 

핵심은 참조 값 설정 과 더불어, 해당 반응 화면 사이즈 값을 media query 없이 JS 로도 표현이 가능하다는

점이지 않을까.

 

기대되는 용도.

정보 1.

향후 JS 내부에서 직관적으로 바로 쓸 수는 있을 것 같으나, 이게 여러 페이지라면 어떻게 적용 될 지는 미지수.

즉, 한 JS 파일 내부에서는 자유분방하게 사용이 가능 할 것이나 사실상 media query 의 용도가 현재로서는 각 파일 별 클래스 또는 id 에 맞게 적용 되는 것이므로 이에 대한 걱정은 무방할 듯 하다.

 

정보 2.

의외의 사실이, 이 media query 방식과 가장 큰 차이점이라면 이 observer 의 접근법은 각 class 별 개별 조정이 가능하다는 점에 있다. 즉, media query 가 전체 페이지에 적용되는 사이즈별 반응 지침이라면, 이 observer 의 경우, 해당 페이지 내부의 특정 element 에만 지정해서 반응하도록 하는 것이 가능해지는 것이다. 

 

주의사항.

절대 다른 기술과 섞어서 사용해서는 안된다. 지지난번 프로젝트에서도 괜한 욕심에 styled-components 의 후크와 더불어 기존 CSS 내용을 한 파일에 같이 섞어서 사용 했다가 리팩토링 및 디버깅 작업시 엄두가 안나는 참극이 벌어진 적이 있다.

 

시간을 들이면 분명 해낼 수는 있으나, 이미 다른 형태의 프로젝트로서 재탄생이 되었기에 현재 문제의 media query 가 오작동하는 프로젝트는 방치 상태이다.