React 프로젝트에 대한 사용자 정의 차원 HOOK.

특정 프로젝트를 진행하면서 문제 없이 모바일에 완벽하게 적용되었는지 확인해야 했고, 애플리케이션 프로세스를 100% 소유하고 싶었기 때문에 특정 변경 사항을 직접 추적해야 했습니다. 이것이 애플리케이션의 핵심이었기 때문입니다.

나는 온라인에서 몇 가지 솔루션을 찾았는데 대부분 단점이 있었고 그다지 인상적이지 않았기 때문에 내 것을 개척하는 것이 가장 좋을 것이라고 결정했습니다. 아래는 내가 사용자 지정 후크를 구축하도록 이끈 마법을 수행한 코드 스니펫입니다. Hooks(useState, useRef, useReducer, useContext++)라는 아이디어가 마음에 듭니다. 최고의 능력.

그래서 다른 문제를 해결하기 위해 복제할 수 있는 방식으로 가능한 한 간단하게 솔루션을 분석했습니다.

useWindowDimensions.jsx

import React, { useEffect, useState } from "react";

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

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

  return windowDimensions;
}

* 사용 방법. 사용자 지정 구성 요소 'MyComponent'에서 *

import React from 'react';
import useWindowDimensions from './hooks/useWindowDimensions';

const MyComponent = () => {
  ...... 
    const { width:w, height:h} = useWindowDimensions();
  ...... 
 return (
       <>
            <AnotherComponent width={w} height={h} />
       </>
  );
}

export default MyComponent

이것이 정말 도움이 되었기를 바랍니다 ..
너희들이 어떻게 생각하는지 알려줘.