EventListener에서 media query 따라하기

EventListener에서 @media query 기능을 사용하고 싶어요.

mouseover 시 색이 바뀐다거나. 크기가 바뀐다거나.
EventListener를 사용하여 특정 상황에 Ref된 DOM의 style혹은 값을 수정 해야할 때가 있다.

물론 대부분의 간단한 스타일 변화 Event는 CSS에서 제공하는 가짜 클래스(Pseudo-classes) 들을 이용해서 구현 할 수 있다. 그 예로 mouseover과 mouseout을 동시에 만족시키는 CSS의 :hover 가 있다.

&:hover { //mouse가 해당 태그 위에 올라가면 일어나는 일. 내려오면 복구.
    //&은 자기자신을 지칭한다.
    box-shadow: 0px 0px 5px grey;  //그림자 생성.
}

이처럼 CSS로 무언가를 구현 할 때는 @media query를 이용하여 디바이스나 브라우저의 크기에 따라 적응형 웹으로 만들 수 있다.

하지만 디테일한 표현을 원하거나 데이터 수정이과 같이 어쩔 수 없이 EventListener를 사용해야 하는 일이 생길 때가 있다. 적응형으로 만들고 싶지만 js에는 @media query가 없다.

window.innerWidth

현재 브라우저의 폭 값이다.
디바이스 혹은 브라우저의 폭에 따라 if문으로 분기를 나눠서 EventListener를 실행할 수 있다.

var box = React.useRef(null);
var word = React.useRef(null);

const hoverShow = () => {
    if (window.innerWidth > 767) {
      //현재 브라우저의 넓이가 모바일(px)보다 클 때
      box.current.style.position = "absolute";
      box.current.style.minWidth = "420px";
      box.current.style.width = "20%";
    }
    word.current.innerText = dict.word;
  };

React.useEffect(() => {
    box.current.addEventListener("mouseover", hoverShow);},
[]);

document.hidden

현재 브라우저의 백그라운드 여부이다.

페이지가 사용자에게 보이지 않는 것으로 간주되는 상태일 경우 true를 반환하고, 그렇지 않을 경우 false를 반환한다.

Art-Tab이나 어떠한 사유로 화면 전환이 일어났을 때에도 브라우저가 일을 할 것이냐의 문제를 표현 할 수 있다.

function handleVisibilityChange() {
//현재 브라우저가 숨겨져있는가?
  if (document.hidden) {  //true면 화면에 보이지 않는 것
    pauseSimulation();    //시뮬레이터를 멈추자
  } else  {               //false면 화면에 보이는 것
    startSimulation();    //시뮬레이터를 시작하자
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

document.visibilityState

추가로 앞서 이야기한 document.hidden은 true와 false를 반환했다면 이녀석은 상태를 string으로 반환한다. 반환되는 string 값은 다음과 같다.

• visible : 페이지 컨텐츠가 적어도 부분적으로 보일 수 있다. 실제로 이것은 페이지가 최소화되지 않은 window 의 맨 앞쪽 탭임을 의미한다.
• hidden : 페이지 컨텐츠가 사용자에게 보이지 않는다. 실제로 이것은 document 가 뒤쪽 탭이거나 최소화된 window 의 부분이거나, OS Screen 의 lock 이 활성화되어 있음을 의미한다.
• prerender : 페이지 컨텐츠가 프리렌더되고 있으며 유저에게 보이지 않는다 (document.hidden 목적으로 숨겨진 것으로 간주). document 는 이 상태에서 시작될 수도 있지만, 다른 값으로부터 이 상태로 전환되지는 않을 것이다. 참고: 브라우저 지원은 optional 하다.
• unloaded : 페이지가 메모리로부터 unload 되고 있다. 참고: 브라우저 지원은 optional 하다.

function handleVisibilityChange() {
//현재 브라우저 상태는?
  if (document.visibilityState **==='hidden'**) {
    pauseSimulation();    //시뮬레이터를 멈추자
  } else if (document.visibilityState **==='visible')** {
    startSimulation();    //시뮬레이터를 시작하자
  } 
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);