구조에 대한 사용자 정의 후크

후크는 훌륭합니다! 나는 그들에 대해 충분히 말할 수 없습니다. 아직 후크와 사랑에 빠지지 않았다면 그렇게 될 것입니다. 그렇게 말하는 것이 너무 주제넘지 않기를 바랍니다.


후크를 좋아하는 이유는 무엇이며 일반 구성 요소와 어떻게 다른가요? 내가 아하 하는 순간을 가졌을 때는 useEffect, useState, useRef 등과 같은 모든 기존 후크를 만났을 때가 아니라 나만의 사용자 정의 후크를 만들었을 때였습니다.

후크는 상태 저장이므로 클로저 메커니즘에 크게 의존합니다. 후크 각각에는 메모리가 부착되어 있어 보관할 수 있습니다. 다음은 stateful 구성 요소와 stateless 구성 요소를 간단히 비교한 것입니다.

function StatelessComponent({ data }) {
  return <>{data}</>;
};

function StatefulComponent() {
  const [data, setData] = React.useState()
  return <>{data}</>;
}

상태 비저장 구성 요소는 부작용이 없는 순수한 함수일 뿐이므로 반환하는 내용은 항상 전달하는 인수에 따라 다릅니다. 반대로 후크도 함수이지만 상태 저장 논리가 포함되어 있으며 다음을 추적합니다. 데이터.

다음은 페이지 매김을 위한 간단한 사용자 지정 후크입니다.

function usePagination({
   initialPage,
   prevPage,
   nextPage,
   latestPage,
   oldestPage,
}: Props) {

  const [current, setCurrent] = useState<number> 
  (initialPage);

//Storing the current page in the localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem("page", current?.toString());
  }, [current]);

//Removing the current page on clean-up.
  useEffect(() => {
    return () => {
      localStorage.removeItem("page");
    };
  }, [latestPage]);

  const latest = () => {
    setCurrent(latestPage);
  };

  const previous = () => {
    setCurrent(Math.max(0, current - prevPage));
  };

  const next = () => {
    setCurrent(Math.min(latestPage, current + nextPage));
  };

  const oldest = () => {
    setCurrent(oldestPage);
  };

  return {
    current,
    getLatest: () => latest(),
    getPrev: () => previous(),
    getNext: () => next(),
    getOldest: () => oldest(),
  };
}
export default usePagination;

후크는 코드를 건조하게 만들고 데이터를 서로 분리하여 유지하며 정의된 각 후크는 유지하고 채울 수 있는 데이터를 캐시합니다. 할당하고 바로 사용할 수 있습니다.

function Pagination() {
  const navigation = {
    initial: 0,
    prevSteps: 10,
    nextSteps: 10,
    latestPage: 273,
    oldestPage: 273 % 10,
  };

  const pagination = usePagination(navigation);

  useEffect(() => {
    setPage(pagination?.current?.toString());
  }, [navigation]);


return (
    <div>
      <Button onClick={pagination.getLatest}>
        Latest
      </Button>
      <Button  onClick={pagination.getPrev}>
        Previous
      </Button>
      <Button onClick={pagination.getNext}>
        Next
      </Button>
      <Button onClick{pagination.getOldest}>
        Oldest
      </Button>
    </div>
  );

}

이거 야! 구성 요소를 만들고 탐색 개체를 소품으로 제공하고 usePagination 등에 전달할 수 있습니다. 글쎄, 당신은 요점을 이해합니다! 더 이상 현재 페이지를 추적하기 위해 상위 구성 요소에 상태 값을 전달하는 것에 대해 걱정할 필요가 없습니다.

저 같으면 훅의 맛이 나면 훅을 대체할 곳을 찾기가 절실할 것입니다.

다음은 토글 기능에 사용할 수 있는 또 다른 유용한 사용자 지정 후크입니다.

function useToggle(initialState: boolean): [boolean, () => void] {
  const [isOpen, setIsOpen] = useState(initialState);

  const toggleSwitch = () => {
    setIsOpen((prev) => !prev);
  };
  return [isOpen, toggleSwitch];
}

그리고 그렇게 부를 수 있습니다.

const [toggle, setToggle] = useToggle(false);

특정 요소의 크기를 감지하려면? 쉬운.

function useWidthDetect(refWidth: React.RefObject<HTMLDivElement>) {
  const [size, setSize] = useState<number | undefined>(0);

  const handleSize = () => {
    const { current } = refWidth;
    const tableWidth = current?.offsetWidth;
    setSize(tableWidth);
  };

  useLayoutEffect(() => {
    handleSize();
    window?.addEventListener("resize", handleSize);

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

  return size;
}

후크를 사용할 때 항상 무언가를 반환할 필요는 없습니다.

function useReset({
  isSubmited,
  setIsSubmited,
  reset
}) {
  React.useEffect(() => {
    if (!isSubmited) return;
    reset();
    setIsSubmited(false);
  }, [reset, isSubmited, setIsSubmited]);
}

러브 훅! 그들은 많은 골칫거리에서 당신을 구하고 "래퍼 지옥"과 계속 성장하는 구성 요소를 갖는 것을 방지합니다. 내 기사가 마음에 드십니까? 가장 좋아하는 후크는 무엇입니까?