css

1

.transShow {
  max-height: 500px;
  transition: max-height 0.2s ease-in;
}
.transHide {
  max-height: 0;
  transition: max-height 0.3s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

dropdown 메뉴에서 하위메뉴 오픈시 상위메뉴가 밀려나는식의 트랜지션 구현시 위와같이 구현하면 됨

2

useEffect(() => {
    function watchResize() {
      window.addEventListener("resize", toggleSidebar);
    }
    watchResize();
    return () => {
      window.removeEventListener("resize", toggleSidebar);
    };
  });
  const toggleSidebar = () => {
    if (window.innerWidth < 1415) {
      ref1.current.style.transform = "translateX(-100%)";
      ref2.current.style.transform = "translateX(-100%)";
    } else {
      ref1.current.style.transform = "translateX(0%)";
      ref2.current.style.transform = "translateX(0%)";
    }
  };
  const toggle = () => {
    if (toggleState === false) {
      ref1.current.style.transform = "translateX(0%)";
      ref2.current.style.transform = "translateX(0%)";
      setToggleState(true);
    } else {
      ref1.current.style.transform = "translateX(-100%)";
      ref2.current.style.transform = "translateX(-100%)";
      setToggleState(false);
    }
  };

가로폭이 1415픽셀이하에서 사이드메뉴가 사라지게 구현하고자하였다.
사이드바옵션이
1번 폭1415px이상에서 toggle on
2번 폭1415px이상에서 toggle off
3번 폭1415px이하에서 toggle on
4번 폭1415px이하에서 toggle off
4가지인데 1번 3번을 미디어쿼리로 설정하고 2,4번을 메뉴버튼 조작이 수동조작이 가능하게 할 경우 1415px이하에서 버튼으로 toggle off일 경우 1415px이상에서도 off 상태이므로 1415px이상에서 항상 on이 되게 하기 위해 미디어 쿼리가 아닌 useEffect로 변화를 주었다.