사용자 지정 useDeviceDetect() 반응 후크를 만드는 방법

후크는 코드의 문제를 해결할 수 있는 도구를 제공하기 때문에 훌륭합니다. 예를 들어 기존 라이브러리에 필요한 기능이 없을 수 있습니다.

나는 오늘 사용자 지정 후크를 만드는 데 필요한 문제를 하나 발견했습니다.

내 과정에 대한 새 랜딩 페이지를 구축하는 중이며 모바일 장치에서 매우 이상한 오류가 발생했습니다. 데스크톱 컴퓨터에서는 스타일이 멋져 보였습니다.

그런데 모바일로 보니 모든게 어긋나고 깨져버렸습니다.



사용자가 모바일 장치를 가지고 있는지 여부를 감지하는 데 사용했던 react-device-detect라는 하나의 라이브러리까지 문제를 추적했습니다. 그렇다면 헤더를 제거하겠습니다.

// templates/course.js
import React from "react";
import { isMobile } from "react-device-detect";

function Course() {
  return (
    <>
      <SEO />
      {!isMobile && <StickyHeader {...courseData} />}
      {/* more components... */}
    </>
  );
}

문제는 이 라이브러리가 Gatsby가 기본적으로 사용하는 서버 측 렌더링을 지원하지 않는다는 것입니다. 그래서 사용자가 모바일 장치를 사용하는지 확인할 수 있는 자체 솔루션을 만들어야 했습니다. 그리고 이를 위해 useDeviceDetect라는 이름의 커스텀 훅을 만들기로 했습니다.

후크 만들기

useDeviceDetect.js라는 동일한 이름으로 내 utils 폴더에 이 후크를 위한 별도의 파일을 만들었습니다. 후크는 반응 후크를 활용하는 공유 가능한 JavaScript 함수이므로 useDeviceDetect라는 함수를 만들고 React를 가져왔습니다.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {}

창에서 사용자 에이전트 가져오기

사용자의 장치에 대한 정보를 얻을 수 있는지 여부를 확인할 수 있는 방법은 userAgent 속성(window의 navigator 속성에 있음)을 통하는 것입니다.

그리고 API/외부 리소스로서 창 API와 상호 작용하는 것은 부작용으로 분류되므로 useEffect 후크 내에서 사용자 에이전트에 액세스해야 합니다.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  React.useEffect(() => {
    console.log(`user's device is: ${window.navigator.userAgent}`);
    // can also be written as 'navigator.userAgent'
  }, []);
}

구성 요소가 마운트되면 typeof navigator를 사용하여 클라이언트 또는 서버에 있는지 확인할 수 있습니다. 서버에 있으면 창에 액세스할 수 없습니다. typeof navigator는 문자열undefined이 없기 때문에 문자열과 같습니다. 그렇지 않으면 클라이언트에 있는 경우 사용자 에이전트 속성을 얻을 수 있습니다.

userAgent 데이터를 얻기 위해 삼항을 사용하여 이 모든 것을 표현할 수 있습니다.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  React.useEffect(() => {
    const userAgent =
      typeof navigator === "undefined" ? "" : navigator.userAgent;
  }, []);
}

userAgent가 모바일 장치인지 확인

userAgent는 모바일 장치를 사용하는 경우 다음 장치 이름 중 하나로 설정되는 문자열 값입니다.

Android, BlackBerry, iPhone, iPad, iPod, Opera Mini, IEMobile 또는 WPDesktop.

우리가 해야 할 일은 문자열을 가져오는 것입니다. 이 문자열 중 하나인지 확인하기 위해 정규식과 함께 .match() 메서드를 가져와 사용합니다. mobile 라는 로컬 변수에 저장합니다.

useState 후크를 사용하여 상태에 결과를 저장하고 초기 값을 false로 지정합니다. 이를 위해 해당 상태 변수 isMobile 를 생성하고 세터는 setMobile 입니다.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  const [isMobile, setMobile] = React.useState(false);

  React.useEffect(() => {
    const userAgent =
      typeof window.navigator === "undefined" ? "" : navigator.userAgent;
    const mobile = Boolean(
      userAgent.match(
        /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
      )
    );
    setMobile(mobile);
  }, []);
}

따라서 mobile 값을 얻으면 상태로 설정한 다음 마지막으로 후크에서 개체를 반환하여 이 후크에 더 많은 기능을 추가하도록 선택하려는 경우 나중에 더 많은 값을 추가할 수 있습니다.

개체 내에서 속성 및 값으로 isMobile를 추가합니다.

// utils/useDeviceDetect.js
import React from "react";

export default function useDeviceDetect() {
  const [isMobile, setMobile] = React.useState(false);

  React.useEffect(() => {
    const userAgent =
      typeof window.navigator === "undefined" ? "" : navigator.userAgent;
    const mobile = Boolean(
      userAgent.match(
        /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
      )
    );
    setMobile(mobile);
  }, []);

  return { isMobile };
}

랜딩 페이지로 돌아가서 후크를 실행하고 구조 해제된 개체에서 해당 속성을 가져와 필요한 곳에 사용할 수 있습니다.

// templates/course.js
import React from "react";
import useDeviceDetect from "../utils/useDeviceDetect";

function Course() {
  const { isMobile } = useDeviceDetect();

  return (
    <>
      <SEO />
      {!isMobile && <StickyHeader {...courseData} />}
      {/* more components... */}
    </>
  );
}

그래서 다음은 타사 라이브러리가 부족할 때 후크가 우리 자신의 문제를 해결할 수 있는 도구를 제공하는 방법에 대한 명확한 예입니다.

Gatsby 또는 Next.js와 같은 서버 측 렌더링 React 프레임워크를 사용하여 사용자가 모바일 장치에 있는지 여부를 감지해야 하는 경우 자신의 코드에서 이 후크를 자유롭게 사용하세요. 이 기능을 확장하고 다른 상태 변수를 만들어 사용자가 데스크톱에 있는지 확인하는 것은 어렵지 않습니다.

이 게시물을 즐기십니까? 리액트 부트캠프에 참여하세요

The React Bootcamp은 React 학습에 대해 알아야 할 모든 것을 비디오, 치트 시트 및 특별 보너스를 포함하여 하나의 포괄적인 패키지로 묶습니다.

수백 명의 개발자가 이미 React를 마스터하고 꿈의 직업을 찾고 미래를 통제하는 데 사용한 내부 정보를 얻으십시오.


열릴 때 알림을 받으려면 여기를 클릭하십시오.