useWindowSize Hook, 반응형 NavBar,Footer

브라우저 사이즈가 바뀜에 따라 NavBar의변경, 하단 Footer의 변경등을 구현하고 싶었다.

 

순수 바닐라 자바스크립트의 window.innerWitdh를 조절하는것도 가능하지만 만들어진 훅이 있길래 가져와서 사용했다.

 

현재 부트스트랩 Grid System을 사용중이고 

해당 사이즈를기준으로 경계를 주어 사용해 주었다.

 

그리고 아래와같이 useState와 useEffect까지 사용해 구현했다.

 

.......

  const size = useWindowSize();
  // const [size,setSize] = useState(size)
  const [sizeon,setSizeon] = useState(false)
  useEffect(()=>{
    if(size.width<=576){
      console.log('핸드폰화면Footer')
      setSizeon(true)
    }else if(size.width>567){
      setSizeon(false)
    }
    console.log(size.width)
    console.log(size.height)
  },[size])
  
  return (
  .........

1.자바스크립트 코드

import { useState, useEffect } from "react";
// Usage
function App() {
  const size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}
// Hook
function useWindowSize() {
  // Initialize state with undefined width/height so server and client renders match
  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });
  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
      // Set window width/height to state
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    // Add event listener
    window.addEventListener("resize", handleResize);
    // Call handler right away so state gets updated with initial window size
    handleResize();
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Empty array ensures that effect is only run on mount
  return windowSize;
}

 

2.타입스크립트 코드

import { useState, useEffect } from "react";
// Define general type for useWindowSize hook, which includes width and height
interface Size {
  width: number | undefined;
  height: number | undefined;
}
// Usage
function App() {
  const size: Size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}
// Hook
function useWindowSize(): Size {
  // Initialize state with undefined width/height so server and client renders match
  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
  const [windowSize, setWindowSize] = useState<Size>({
    width: undefined,
    height: undefined,
  });
  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
      // Set window width/height to state
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    // Add event listener
    window.addEventListener("resize", handleResize);
    // Call handler right away so state gets updated with initial window size
    handleResize();
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Empty array ensures that effect is only run on mount
  return windowSize;
}

- 참고한사이트

https://usehooks.com/useWindowSize/

useWindowSize

https://www.npmjs.com/package/react-window-size

react-window-size

https://jcon.tistory.com/121

react get browser size

https://sometimes-n.tistory.com/22

[javascript] 윈도우 창 크기 (window.outerWidth, window.outerHeight, window.outerHeight, window.innerWidth, innerHeight)

->브라우저 크기 설명이 잘되어 있는 사이트