UseWindowsSize() React 갈고리 작성 방법

나의 게이츠비 사이트에서, 나는 페이지의 크기를 줄일 때, 더 적은 링크를 표시하고 싶은 제목이 있다.

이를 위해서는 미디어 조회(CSS)를 사용하거나 사용자 정의react 갈고리를 사용하여 페이지의 현재 크기를 제공하고 JSX의 링크를 숨기거나 표시할 수 있습니다.
이전에 나는 react-use라는 라이브러리의 갈고리를 사용했다.나는 제3자 라이브러리 전체를 가지고 있지 않고, 너비와 높이를 포함한 창의 크기를 제공하기 위해 갈고리를 만들기로 결정했다.나는 이것을 갈고리useWindowSize라고 부른다.

연결 만들기

우선, 우리는 새로운 파일을 만들 것이다.js는 우리의utilities(utils) 폴더에서 갈고리useWindowSize와 동명입니다. 사용자 정의 갈고리를 내보내는 동시에React(갈고리 사용)를 가져옵니다.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {}

현재 Gatsby 사이트에서 사용하고 있습니다. 서버가 렌더링했기 때문에 창 크기를 얻어야 합니다. 그러나 서버에 있기 때문에 접근할 수 없습니다.서버에 없는지 확인하고 확인하기 위해 유형 window 이 문자열 undefined 과 같지 않은지 확인할 수 있습니다.
이 경우 브라우저의 기본 폭과 높이(예: 객체의 1200 및 800)를 반환할 수 있습니다.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {
  if (typeof window !== "undefined") {
    return { width: 1200, height: 800 };
  }
}

창에서 폭 및 높이 가져오기

만약에 우리가 클라이언트에서 창을 얻을 수 있다고 가정하면, 우리는 useEffect 갈고리를 사용하여 window와의 상호작용을 통해 부작용을 집행할 수 있다.구성 요소를 설치한 후에만 ffect 함수를 호출할 수 있도록 빈 의존 항목 그룹을 포함할 것입니다.
창의 너비와 높이를 찾기 위해 이벤트 탐지기를 추가하고 resize 이벤트를 탐지할 수 있습니다.브라우저 크기가 바뀔 때마다 상태를 업데이트할 수 있습니다. useState 를 windowSize 라고 합니다. 업데이트된 setter는 setWindowSize 입니다.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {
  if (typeof window !== "undefined") {
    return { width: 1200, height: 800 };
  }

  const [windowSize, setWindowSize] = React.useState();

  React.useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    });
  }, []);
}

창 크기를 조정하면 리셋이 호출되고 현재 창 크기로 windowSize 상태가 업데이트됩니다.이를 위해 폭 window.innerWidth, 높이 window.innerHeight 를 설정합니다.

SSR 지원 추가

그러나 이곳의 코드는 작용하지 않을 것이다.갈고리의 관건적인 규칙은 조건적으로 그것을 호출할 수 없기 때문이다.따라서 useState 또는 useEffect 갈고리를 사용하기 전에 우리는 그것들 위에 조건이 하나 있을 수 없다.
이 문제를 해결하기 위해 우리는 조건부로 초기값useState을 설정할 것이다.창이 문자열 isSSR 과 같지 않은지 확인하기 위해 undefined 이라는 변수를 만들 것입니다.
우리는 3원을 사용하여 너비와 높이를 설정할 것이다. 우선 우리가 서버에 있는지 없는지를 검사할 것이다.만약 그렇다면 기본값을 사용하고, 그렇지 않다면 window.innerWidth 및 window.innerHeight 을 사용합니다.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {
  // if (typeof window !== "undefined") {
  // return { width: 1200, height: 800 };
  // }
  const isSSR = typeof window !== "undefined";
  const [windowSize, setWindowSize] = React.useState({
    width: isSSR ? 1200 : window.innerWidth,
    height: isSSR ? 800 : window.innerHeight,
  });

  React.useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    });
  }, []);
}

마지막으로, 우리는 구성 요소가 언제 마운트되는지 고려해야 한다.우리는 무엇을 해야 합니까?크기를 조정하는 탐지기를 삭제해야 합니다.

크기 조정 이벤트 탐지기 삭제

UseEffect에서 함수를 반환하여 이를 수행할 수 있습니다. 우리는 window.removeEventListener 탐지기를 삭제합니다.

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {
  // if (typeof window !== "undefined") {
  // return { width: 1200, height: 800 };
  // }
  const isSSR = typeof window !== "undefined";
  const [windowSize, setWindowSize] = React.useState({
    width: isSSR ? 1200 : window.innerWidth,
    height: isSSR ? 800 : window.innerHeight,
  });

  React.useEffect(() => {
    window.addEventListener("resize", () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    });

    return () => {
      window.removeEventListener("resize", () => {
        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
      });
    };
  }, []);
}

그러나 우리는 여기와 같은 두 개의 다른 함수가 아니라 같은 함수에 대한 인용이 필요하기 때문이다.이를 위해, 우리는 changeWindowSize라는 두 개의 탐지기를 위해 공유 리셋 함수를 만들 것이다.
마지막으로 갈고리의 끝에 우리는 windowSize 상태로 돌아갈 것이다.이렇게

// utils/useWindowSize.js

import React from "react";

export default function useWindowSize() {
  const isSSR = typeof window !== "undefined";
  const [windowSize, setWindowSize] = React.useState({
    width: isSSR ? 1200 : window.innerWidth,
    height: isSSR ? 800 : window.innerHeight,
  });

  function changeWindowSize() {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  }

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

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

  return windowSize;
}

활용단어참조

갈고리를 사용하려면 필요한 곳에 가져오고, 호출하고, 어떤 요소를 숨기거나 표시해야 하는 곳에 넓이를 사용해야 한다.
내 예에서, 이것은 500px의 표시이다.여기에서 나는 모든 다른 링크를 숨기고 "즉시 가입"단추만 표시하고 싶다. 위의 예에서 보듯이

// components/StickyHeader.js

import React from "react";
import useWindowSize from "../utils/useWindowSize";

function StickyHeader() {
  const { width } = useWindowSize();

  return (
    <div>
      {/* visible only when window greater than 500px */}
      {width > 500 && (
        <>
          <div onClick={onTestimonialsClick} role="button">
            <span>Testimonials</span>
          </div>
          <div onClick={onPriceClick} role="button">
            <span>Price</span>
          </div>
          <div>
            <span onClick={onQuestionClick} role="button">
              Question?
            </span>
          </div>
        </>
      )}
      {/* visible at any window size */}
      <div>
        <span className="primary-button" onClick={onPriceClick} role="button">
          Join Now
        </span>
      </div>
    </div>
  );
}

이 갈고리는 Gatsby와 Next 같은 서버에서 나타나는 React 응용 프로그램에 적용됩니다.js.

이거 좋아요?React 캠프에 합류

The React Bootcamp 동영상, 메모지, 특별 보너스를 포함한 Learning React에 대한 모든 정보를 종합 패키지로 포장합니다.
수백 명의 개발자가 React를 파악하고, 꿈의 직장을 찾고, 미래를 관리하는 데 이미 사용된 내부 정보를 얻습니다.

열 때 알림을 받으려면 여기를 누르십시오