React useWindowSize 훅

소개

이 랩에서는 React 에서 useWindowSize 훅을 사용하여 브라우저 창의 크기를 추적하는 방법을 배웁니다. 이 훅을 사용하면 반응형 디자인을 만들고 사용자의 화면 크기에 따라 컴포넌트의 레이아웃을 조정할 수 있습니다. 이 랩을 마치면 React 에서 훅을 사용하는 방법과 사용자 친화적인 애플리케이션을 만드는 방법에 대한 이해도가 높아질 것입니다.

Skills Graph

React useWindowSize 훅

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

브라우저 창의 크기를 추적하려면 다음 단계를 수행할 수 있습니다.

1. useState() 훅을 사용하여 창의 크기를 저장할 상태 변수 windowSize를 초기화합니다. 서버와 클라이언트 렌더링 간의 불일치를 방지하기 위해 두 값 모두 undefined로 초기화합니다.

const [windowSize, setWindowSize] = React.useState({
  width: undefined,
  height: undefined
});

2. Window.innerWidth 및 Window.innerHeight를 사용하여 상태 변수를 업데이트하는 함수 handleResize()를 생성합니다. 이 함수는 'resize' 이벤트가 트리거될 때마다 호출됩니다.

const handleResize = () =>
  setWindowSize({ width: window.innerWidth, height: window.innerHeight });

3. useEffect() 훅을 사용하여 마운트 시 'resize' 이벤트에 대한 적절한 리스너를 설정하고 언마운트 시 정리합니다.

React.useEffect(() => {
  window.addEventListener("resize", handleResize);

  handleResize();

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

모두 합쳐서 useWindowSize() 사용자 정의 훅은 다음과 같이 정의할 수 있습니다.

const useWindowSize = () => {
  const [windowSize, setWindowSize] = React.useState({
    width: undefined,
    height: undefined
  });

  const handleResize = () =>
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });

  React.useEffect(() => {
    window.addEventListener("resize", handleResize);

    handleResize();

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return windowSize;
};

useWindowSize() 훅을 사용하려면 컴포넌트에서 호출하고 반환된 객체에서 width 및 height 값을 구조 분해 할당하면 됩니다.

const MyApp = () => {
  const { width, height } = useWindowSize();

  return (
    <p>
      Window size: ({width} x {height})
    </p>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! React useWindowSize Hook 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.