자신만의 React Hook을 구축하는 방법: 단계별 가이드

사용자 정의 React 후크는 React 애플리케이션에 특별하고 고유한 기능을 추가할 수 있는 필수 도구입니다.

많은 경우 애플리케이션에 특정 기능을 추가하려는 경우 문제 해결을 위해 만들어진 타사 라이브러리를 설치하기만 하면 됩니다. 하지만 그러한 라이브러리나 후크가 존재하지 않으면 어떻게 합니까?

React 개발자로서 문제를 해결하거나 자신의 React 프로젝트에 누락된 기능을 추가하기 위해 사용자 정의 후크를 만드는 과정을 배우는 것이 중요합니다.

이 단계별 가이드에서는 내 애플리케이션을 위해 만든 세 가지 후크를 분석하여 자신만의 사용자 정의 React 후크를 만드는 방법과 이러한 후크가 해결하기 위해 만든 문제를 보여 드리겠습니다.

1. useCopyToClipboard 후크 내 웹사이트 reedbarger.com의 이전 버전에서는 사용자가 React-copy-to-clipboard라는 패키지를 사용하여 내 기사의 코드를 복사할 수 있도록 허용했습니다.

사용자가 스니펫 위에 마우스를 놓고 클립보드 버튼을 클릭하면 코드가 컴퓨터의 클립보드에 추가되어 원하는 곳에 코드를 붙여넣고 사용할 수 있습니다.

copy-gif.gif
그러나 타사 라이브러리를 사용하는 대신 나만의 사용자 정의 React 후크를 사용하여 이 기능을 다시 만들고 싶었습니다. 제가 만드는 모든 사용자 정의 반응 후크와 마찬가지로, 특히 앱 전체에서 재사용할 수 있는 기능을 위해 일반적으로 utils 또는 lib라고 하는 전용 폴더에 넣습니다.

이 후크를 useCopyToClipboard.js라는 파일에 넣고 같은 이름의 함수를 만들어 보겠습니다.

사용자의 클립보드에 일부 텍스트를 복사할 수 있는 다양한 방법이 있습니다. 이를 위해 클립보드로 복사라는 프로세스를 더욱 안정적으로 만드는 라이브러리를 사용하는 것을 선호합니다.

복사라고 부르는 함수를 내보냅니다.

// utils/useCopyToClipboard.js
"react"에서 React를 가져옵니다.
"클립보드로 복사"에서 복사본 가져오기;

기본 함수 내보내기 useCopyToClipboard() {}
다음으로 사용자의 클립보드에 추가하려는 텍스트를 복사하는 데 사용되는 함수를 만듭니다. 이 함수를 handlerCopy라고 부르겠습니다.

handleCopy 기능 만드는 방법
함수 내에서 먼저 문자열이나 숫자 유형의 데이터만 허용하는지 확인해야 합니다. 유형이 문자열인지 숫자인지 확인하는 if-else 문을 설정하겠습니다. 그렇지 않으면 사용자에게 다른 유형을 복사할 수 없다는 오류를 콘솔에 기록합니다.

"react"에서 React를 가져옵니다.
"클립보드로 복사"에서 복사본 가져오기;

기본 함수 내보내기 useCopyToClipboard() {
const [isCopied, setCopied] = React.useState(false);

handleCopy(text) 함수 {
if (텍스트 유형 === "문자열" || 텍스트 유형 == "숫자") {
//복사
} 그 밖의 {
//복사하지 마세요
console.error(
${typeof text} 유형을 클립보드에 복사할 수 없습니다. 문자열 또는 숫자여야 합니다.
);
}
}
}
다음으로 텍스트를 가져와서 문자열로 변환한 다음 복사 함수에 전달합니다. 거기에서 우리는 후크에서 애플리케이션의 원하는 위치로 handlerCopy 함수를 반환합니다.

일반적으로 HandleCopy 함수는 버튼의 onClick에 연결됩니다.

"react"에서 React를 가져옵니다.
"클립보드로 복사"에서 복사본 가져오기;

기본 함수 내보내기 useCopyToClipboard() {
함수 handlerCopy(텍스트) {
if (텍스트 유형 === "문자열" || 텍스트 유형 == "숫자") {
copy(text.toString());
} 그 밖의 {
console.error(
${typeof text} 유형을 클립보드에 복사할 수 없습니다. 문자열 또는 숫자여야 합니다.
);
}
}

반품 핸들복사;
}
또한 텍스트가 복사되었는지 여부를 나타내는 일부 상태가 필요합니다. 이를 생성하기 위해 후크 상단에서 useState를 호출하고 새 상태 변수 isCopied를 만듭니다. 여기서 setter는 setCopy라고 합니다.

처음에는 이 값이 false입니다. 텍스트가 성공적으로 복사되면 copy를 true로 설정합니다. 그렇지 않으면 false로 설정하겠습니다.

마지막으로 HandleCopy와 함께 배열 내의 후크에서 isCopied를 반환합니다.

"react"에서 React를 가져옵니다.
"클립보드로 복사"에서 복사본 가져오기;

기본 함수 내보내기 useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

handleCopy(text) 함수 {
if (텍스트 유형 === "문자열" || 텍스트 유형 == "숫자") {
copy(text.toString());
setCopied(true);
} 그 밖의 {
setCopied(false);
console.error(
${typeof text} 유형을 클립보드에 복사할 수 없습니다. 문자열 또는 숫자여야 합니다.
);
}
}

[isCopied, handlerCopy]를 반환합니다.
}
CopyToClipboard 사용 방법
이제 원하는 구성 요소 내에서 useCopyToClipboard를 사용할 수 있습니다.

제 경우에는 코드 조각에 대한 코드를 받은 복사 버튼 구성 요소와 함께 사용하겠습니다.

이 작업을 수행하려면 버튼에 클릭 시 기능을 추가하기만 하면 됩니다. 그리고 텍스트로 요청된 코드와 함께 Handle Copy라는 함수가 반환됩니다. 그리고 일단 복사되면 그것은 사실입니다. 복사가 성공했음을 나타내는 다른 아이콘을 표시할 수 있습니다.

"react"에서 React를 가져옵니다.
"../svg/ClipboardIcon"에서 클립보드 아이콘 가져오기;
"../svg/SuccessIcon"에서 SuccessIcon 가져오기;
"../utils/useCopyToClipboard"에서 useCopyToClipboard 가져오기;

함수 CopyButton({ 코드 }) {
const [isCopied, handlerCopy] = useCopyToClipboard();

반품(
handlerCopy(코드)}>
{복사되었나요? : }

);
}
재설정 간격을 추가하는 방법
코드를 한 가지 개선할 수 있습니다. 현재 후크를 작성했으므로 isCopied는 항상 true입니다. 즉, 항상 성공 아이콘이 표시됩니다.

성공-gif.gif
몇 초 후에 상태를 재설정하려면 useCopyToClipboard에 시간 간격을 전달할 수 있습니다. 해당 기능을 추가해 보겠습니다.

다시 후크로 돌아가서 기본값이 null인 ResetInterval이라는 매개변수를 생성할 수 있습니다. 이 매개변수는 인수가 전달되지 않으면 상태가 재설정되지 않도록 합니다.

그런 다음 useEffect를 추가하여 텍스트가 복사되고 재설정 간격이 있는 경우 setTimeout을 사용하여 해당 간격 후에 isCopied를 다시 false로 설정한다는 것을 나타냅니다.

또한 후크가 마운트 해제에 사용되는 구성 요소인 경우 해당 시간 초과를 지워야 합니다(즉, 상태가 더 이상 업데이트할 수 없음을 의미함).

"react"에서 React를 가져옵니다.
"클립보드로 복사"에서 복사본 가져오기;

기본 함수 내보내기 useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

const handlerCopy = React.useCallback((text) => {
if (텍스트 유형 === "문자열" || 텍스트 유형 == "숫자") {
copy(text.toString());
setCopied(true);
} 그 밖의 {
setCopied(false);
console.error(
${typeof text} 유형을 클립보드에 복사할 수 없습니다. 문자열 또는 숫자여야 합니다.
);
}
}, []);

React.useEffect(() => {
시간 초과를 허용하세요.
if (isCopied && ResetInterval) {
timeout = setTimeout(() => setCopied(false), ResetInterval);
}
반환() => {
ClearTimeout(timeout);
};
}, [isCopied, ResetInterval]);

[isCopied, handlerCopy]를 반환합니다.
}
마지막으로 우리가 할 수 있는 마지막 개선 사항은 다시 렌더링할 때마다 다시 생성되지 않도록 useCallback 후크에 handlerCopy를 래핑하는 것입니다.

최종 결과
그리고 이를 통해 주어진 시간 간격 후에 상태를 재설정할 수 있는 최종 후크가 생겼습니다. 하나를 전달하면 아래와 같은 결과가 표시됩니다.

"react"에서 React를 가져옵니다.
"../svg/ClipboardIcon"에서 클립보드 아이콘 가져오기;
"../svg/SuccessIcon"에서 SuccessIcon 가져오기;
"../utils/useCopyToClipboard"에서 useCopyToClipboard 가져오기;

함수 CopyButton({ 코드 }) {
// isCopied는 3초 시간 초과 후 재설정됩니다
const [isCopied, handlerCopy] = useCopyToClipboard(3000);

반품(
handlerCopy(코드)}>
{복사되었나요? : }

);
}
최종결과.gif

1. PageBottom Hook 사용 React 앱에서는 사용자가 언제 페이지 하단으로 스크롤했는지 아는 것이 중요할 때가 있습니다.

예를 들어 Instagram과 같이 무한 스크롤이 있는 앱에서는 사용자가 페이지 하단에 도달하면 더 많은 게시물을 가져와야 합니다.

인스타그램 무한 스크롤
무한 스크롤 생성과 같은 유사한 사용 사례에 대해 usePageBottom 후크를 직접 생성하는 방법을 살펴보겠습니다.

우선 utils 폴더에 별도의 파일인 usePageBottom.js를 만들고 같은 이름의 함수(후크)를 추가하겠습니다.

// utils/usePageBottom.js
"react"에서 React를 가져옵니다.

기본 함수 내보내기 usePageBottom() {}

다음으로 사용자가 페이지 하단을 누르는 시점을 계산해야 합니다. 창의 정보를 통해 이를 확인할 수 있습니다. 이에 액세스하려면 후크가 호출되는 구성 요소가 마운트되어 있는지 확인해야 하므로 빈 종속성 배열과 함께 useEffect 후크를 사용하겠습니다.

// utils/usePageBottom.js
"react"에서 React를 가져옵니다.

내보내기 기본 함수 usePageBottom() {
React.useEffect(() => {}, []);
}

창의 innerHeight 값과 문서의 scrollTop 값을 더한 값이 offsetHeight와 같을 때 사용자는 페이지 하단으로 스크롤한 것입니다. 두 값이 동일하면 결과는 true가 되며 사용자는 페이지 하단으로 스크롤했습니다.

// utils/usePageBottom.js
"react"에서 React를 가져옵니다.

내보내기 기본 함수 usePageBottom() {
React.useEffect(() => {
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
}, []);
}

이 표현식의 결과를 isBottom 변수에 저장하고 Bottom이라는 상태 변수를 업데이트하여 궁극적으로 후크에서 반환하게 됩니다.

// utils/usePageBottom.js
"react"에서 React를 가져옵니다.

내보내기 기본 함수 usePageBottom() {
const [bottom, setBottom] = React.useState(false);

React.useEffect(() => {
const isBottom =
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
setBottom(isButton);
}, []);

하단으로 돌아가기;
}

그러나 현재의 코드는 작동하지 않습니다. 왜 안되나요?

문제는 사용자가 스크롤할 때마다 isBottom을 계산해야 한다는 사실에 있습니다. 결과적으로 window.addEventListener를 사용하여 스크롤 이벤트를 수신해야 합니다. 사용자가 스크롤할 때마다 호출되는 handlerScroll이라는 로컬 함수를 생성하여 이 표현식을 재평가할 수 있습니다.

// utils/usePageBottom.js
"react"에서 React를 가져옵니다.

내보내기 기본 함수 usePageBottom() {
const [bottom, setBottom] = React.useState(false);

React.useEffect(() => {
함수 핸들스크롤() {
const isBottom =
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight;
setBottom(isButton);
}
window.addEventListener("scroll", handlerScroll);
}, []);

하단으로 돌아가기;
}

마지막으로 상태를 업데이트하는 이벤트 리스너가 있으므로 사용자가 페이지에서 벗어나 구성 요소가 제거되는 이벤트를 처리해야 합니다. 더 이상 존재하지 않는 상태 변수를 업데이트하려고 시도하지 않도록 추가한 스크롤 이벤트 리스너를 제거해야 합니다.

window.removeEventListener와 함께 useEffect에서 함수를 반환하여 이 작업을 수행할 수 있습니다. 여기서 동일한 handlerScroll 함수에 대한 참조를 전달합니다. 이제 끝났습니다.

// utils/usePageBottom.js
"react"에서 React를 가져옵니다.

내보내기 기본 함수 usePageBottom() {
const [bottom, setBottom] = React.useState(false);

React.useEffect(() => {
함수 핸들스크롤() {
const isBottom =
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight;
setBottom(isButton);
}
window.addEventListener("scroll", handlerScroll);
반환() => {
window.removeEventListener("scroll", handlerScroll);
};
}, []);

하단으로 돌아가기;
}

이제 페이지 하단에 도달했는지 여부를 알고 싶은 모든 함수에서 이 코드를 간단히 호출할 수 있습니다.

제 개츠비 사이트에 헤더가 있는데, 페이지 크기를 줄이면 링크를 적게 보여주고 싶어요.

헤더를 표시하도록 창 크기 조정
이를 위해 미디어 쿼리(CSS)를 사용하거나 사용자 정의 React 후크를 사용하여 페이지의 현재 크기를 제공하고 JSX에서 링크를 숨기거나 표시할 수 있습니다.

이전에는 React-use라는 라이브러리의 후크를 사용하고 있었습니다. 전체 타사 라이브러리를 가져오는 대신 너비와 높이 등 창의 크기를 제공하는 나만의 후크를 만들기로 결정했습니다. 나는 이 후크를 useWindowSize라고 불렀습니다.

후크 만드는 방법
먼저 유틸리티(utils) 폴더에 후크 useWindowSize와 동일한 이름의 새 파일 .js를 만듭니다. 커스텀 후크를 내보내는 동안 React(후크를 사용하기 위해)를 가져오겠습니다.

// utils/useWindowSize.js

"react"에서 React를 가져옵니다.

기본 함수 내보내기 useWindowSize() {}

이제 서버 렌더링인 Gatsby 사이트 내에서 이것을 사용하고 있으므로 창 크기를 가져와야 합니다. 하지만 서버에 있기 때문에 접근이 불가능할 수도 있습니다.

우리가 서버에 있지 않은지 확인하기 위해 창 유형이 정의되지 않은 문자열과 같지 않은지 확인할 수 있습니다.

이 경우 브라우저의 기본 너비와 높이(예: 객체 내에서 1200 및 800)로 돌아갈 수 있습니다.

// utils/useWindowSize.js

"react"에서 React를 가져옵니다.

기본 함수 내보내기 useWindowSize() {
if (창 유형 !== "정의되지 않음") {
return { 너비: 1200, 높이: 800 };
}
}

창에서 너비와 높이를 얻는 방법
그리고 우리가 클라이언트에 있고 창을 얻을 수 있다고 가정하면 useEffect 후크를 사용하여 창과 상호 작용하여 부작용을 수행할 수 있습니다. (이 후크가 호출되는) 구성 요소가 마운트된 후에만 효과 함수가 호출되도록 빈 종속성 배열을 포함할 것입니다.

창 너비와 높이를 알아내기 위해 이벤트 리스너를 추가하고 크기 조정 이벤트를 수신할 수 있습니다. 그리고 브라우저 크기가 변경될 때마다 (useState로 생성된) 상태를 업데이트할 수 있습니다. 이를 windowSize라고 부르며 이를 업데이트하는 설정자는 setWindowSize가 됩니다.

// utils/useWindowSize.js

"react"에서 React를 가져옵니다.

기본 함수 내보내기 useWindowSize() {
if (창 유형 !== "정의되지 않음") {
return { 너비: 1200, 높이: 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이라는 변수를 생성할 것입니다. 이 변수는 창이 정의되지 않은 문자열과 동일하지 않은지 확인하기 위해 동일한 검사를 수행합니다.

그리고 먼저 서버에 있는지 확인하여 삼항을 사용하여 너비와 높이를 설정하겠습니다. 그렇다면 기본값을 사용하고, 그렇지 않으면 window.innerWidth 및 window.innerHeight를 사용합니다.

// utils/useWindowSize.js

"react"에서 React를 가져옵니다.

기본 함수 내보내기 useWindowSize() {
// if (창 유형 !== "정의되지 않음") {
// return { 너비: 1200, 높이: 800 };
// }
const isSSR = 창 유형 !== "정의되지 않음";
const [windowSize, setWindowSize] = React.useState({
너비: isSSR ? 1200 : window.innerWidth,
키: isSSR ? 800 : window.innerHeight,
});

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

그런 다음 마지막으로 구성요소가 마운트 해제되는 시점에 대해 생각해야 합니다. 우리는 무엇을 해야 합니까? 크기 조정 리스너를 제거해야 합니다.

크기 조정 이벤트 리스너를 제거하는 방법
useEffectand에서 함수를 반환하면 됩니다. window.removeEventListener를 사용하여 리스너를 제거하겠습니다.

// utils/useWindowSize.js

"react"에서 React를 가져옵니다.

기본 함수 내보내기 useWindowSize() {
// if (창 유형 !== "정의되지 않음") {
// return { 너비: 1200, 높이: 800 };
// }
const isSSR = 창 유형 !== "정의되지 않음";
const [windowSize, setWindowSize] = React.useState({
너비: isSSR ? 1200 : window.innerWidth,
키: 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

"react"에서 React를 가져옵니다.

기본 함수 내보내기 useWindowSize() {
const isSSR = 창 유형 !== "정의되지 않음";
const [windowSize, setWindowSize] = React.useState({
너비: isSSR ? 1200 : window.innerWidth,
키: isSSR ? 800 : window.innerHeight,
});

함수 변경WindowSize() {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
}

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

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

}, []);

창 크기 반환;
}

최종 결과
후크를 사용하려면 필요한 곳에 가져오고, 호출하고, 특정 요소를 숨기거나 표시하려는 위치에 너비를 사용하면 됩니다.

저의 경우 500px 정도 됩니다. 여기서는 위의 예에서 볼 수 있듯이 다른 모든 링크를 숨기고 지금 가입 버튼만 표시하고 싶습니다.

// 구성요소/StickyHeader.js

"react"에서 React를 가져옵니다.
"../utils/useWindowSize"에서 useWindowSize를 가져옵니다.

StickyHeader() 함수 {
const { 너비 } = useWindowSize();

반품(

{/* 창이 500px보다 큰 경우에만 표시됩니다. /}
{너비 > 500 && (
<>

사용후기


가격



질문이 있으신가요?


>
)}
{/ 모든 창 크기에서 볼 수 있음 */}


지금 가입하세요



);
}

이 후크는 Gatsby 및 Next.js와 같은 서버 렌더링 React 앱에서 작동합니다.

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

근데 모바일로 보니까 다 엉성하고 깨져있더라구요.

React 앱 오류
나는 사용자가 모바일 장치를 가지고 있는지 여부를 감지하는 데 사용했던 반응 장치 감지라는 하나의 라이브러리까지 문제를 추적했습니다. 그렇다면 헤더를 삭제하겠습니다.

//template/course.js
"react"에서 React를 가져옵니다.
"react-device-Detect"에서 { isMobile } 가져오기;

기능강좌() {
복귀(
<>

{!isMobile && }
{/* 추가 구성요소... */}
>
);
}

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

훅을 만드는 방법
나는 이 후크에 대해 동일한 이름의 useDeviceDetect.js를 사용하여 내 utils 폴더에 별도의 파일을 만들었습니다. Hooks는 React Hooks를 활용하는 공유 가능한 JavaScript 함수이므로 useDeviceDetect라는 함수를 만들고 React를 가져왔습니다.

// utils/useDeviceDetect.js
"react"에서 React를 가져옵니다.

기본 함수 내보내기 useDeviceDetect() {}

창에서 사용자 에이전트를 가져오는 방법
사용자 기기에 대한 정보를 얻을 수 있는지 확인할 수 있는 방법은 userAgent 속성(window의 navigator 속성에 위치)을 통해서입니다.

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

// utils/useDeviceDetect.js
"react"에서 React를 가져옵니다.

기본 함수 내보내기 useDeviceDetect() {
React.useEffect(() => {
console.log(사용자의 장치는 ${window.navigator.userAgent});
// 'navigator.userAgent'로 쓸 수도 있습니다
}, []);
}

구성 요소가 마운트되면 유형의 탐색기를 사용하여 현재 클라이언트에 있는지 서버에 있는지 확인할 수 있습니다. 서버에 있다면 창에 접근할 수 없습니다. typeof navigator는 문자열이 없기 때문에 정의되지 않은 문자열과 같습니다. 그렇지 않고 클라이언트에 있는 경우 사용자 에이전트 속성을 얻을 수 있습니다.

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

// utils/useDeviceDetect.js
"react"에서 React를 가져옵니다.

기본 함수 내보내기 useDeviceDetect() {
React.useEffect(() => {
const userAgent =
네비게이터 유형 === "정의되지 않음" ? "" : navigator.userAgent;
}, []);
}

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

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

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

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

// utils/useDeviceDetect.js
"react"에서 React를 가져옵니다.

기본 함수 내보내기 useDeviceDetect() {
const [isMobile, setMobile] = React.useState(false);

React.useEffect(() => {
const userAgent =
typeof window.navigator === "정의되지 않음" ? "" : navigator.userAgent;
const mobile = 부울(
userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
);
setMobile(모바일);
}, []);
}

따라서 모바일 값을 얻으면 이를 상태로 설정합니다. 그런 다음 마지막으로 후크에서 개체를 반환하므로 나중에 이 후크에 더 많은 기능을 추가하려는 경우 더 많은 값을 추가할 수 있습니다.

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

// utils/useDeviceDetect.js
"react"에서 React를 가져옵니다.

기본 함수 내보내기 useDeviceDetect() {
const [isMobile, setMobile] = React.useState(false);

React.useEffect(() => {
const userAgent =
typeof window.navigator === "정의되지 않음" ? "" : navigator.userAgent;
const mobile = 부울(
userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
);
setMobile(모바일);
}, []);

{ isMobile } 반환;
}

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

//template/course.js
"react"에서 React를 가져옵니다.
"../utils/useDeviceDetect"에서 useDeviceDetect 가져오기;

기능강좌() {
const { isMobile } = useDeviceDetect();

반품(
<>

{!isMobile && }
{/* 추가 구성요소... */}
>
);
}

결론
이러한 각 예를 통해 설명하려고 시도한 것처럼 사용자 정의 React 후크는 타사 라이브러리가 부족할 때 자체 문제를 해결할 수 있는 도구를 제공할 수 있습니다.

이 가이드를 통해 자신만의 React 후크를 언제, 어떻게 생성하는지에 대한 더 나은 아이디어를 얻으셨기를 바랍니다. 자신의 프로젝트에서 이러한 후크와 위의 코드를 자유롭게 사용하고 사용자 정의 React 후크에 대한 영감을 얻으세요.

위 내용은 자신만의 React Hook을 구축하는 방법: 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!