브라우저 너비를 가져오는 방법(addEventListener)

addEventListener

    const windowResize = () => {
      if (window.innerWidth > 769) {
        setMenu(false);
      }
    };

    window.addEventListener(`resize`, windowResize);

 

addEventListener는 첫번째 인자로 어떤 이벤트를 감지할 것인지 적어준다.

두번째 인자로는 첫번째 인자가 발생했을 때 일어날 이벤트를 적어준다.

removeEventListener

      window.removeEventListener(`resize`, windowResize);

이벤트 대상에 등록한 수신기를 제거한다.

어느 수신기 중 하나가 이벤트를 처리하는 중에 다른 수신기를 제거하면 제거된 이벤트 수신기는 현재 이벤트에 대해 발동하지 않는다. 그러나 다시 부착할 수는 있다.

실제 사용 코드

  const [menu, setMenu] = useState(false);

  const onClickBar = useCallback(() => {
    setMenu((prev) => !prev);
  }, []);

  useEffect(() => {
    const windowResize = () => {
      if (window.innerWidth > 769) {
        setMenu(false);
      }
    };

    window.addEventListener(`resize`, windowResize);

    return () => {
      window.removeEventListener(`resize`, windowResize);
    };
  }, []);

useEffect를 사용해서 브라우저 너비가 변경을 감지한다. 그리고 너비가 769 이상이 되면 메뉴가 사라지는 코드를 구현했다.