typescript를 사용하여 React에서 사용자 지정 후크를 만드는 방법은 무엇입니까?

많은 웹 개발자가 사용자 지정 요구 사항을 해결하기 위해 React.js를 사용하도록 전환함에 따라 Typescript 사용이 날마다 증가하고 있습니다. 기능 구성 요소에 반응 후크를 도입하면 실제 문제에 대한 보다 복잡한 솔루션을 개발하기가 더 쉬워집니다.

React hooks은 기본적으로 함수 구성 요소에서 React 상태 및 수명 주기 기능에 "연결"할 수 있는 기능이므로 더 복잡하고 혼란스러운 클래스 구성 요소가 아닌 기능적 구성 요소를 사용하여 문제를 해결하는 데 도움이 됩니다.

사용자 지정 후크를 만드는 것은 새로운 업계 관행이며 여전히 많은 반응 개발자가 이를 찾고 있습니다.

따라서 여기 이 튜토리얼에서는 커스텀 훅이 무엇인지, 그리고 우리만의 방식으로 구현하는 방법을 설명하겠습니다. 다음은 염두에 두어야 할 몇 가지 사항입니다.

사용자 정의 후크는 기본적으로 일부 인수가 필요하거나 필요하지 않고 호출자 구성 요소에 무언가를 반환하는 함수입니다.

사용자 정의 후크 이름은 use라는 단어로 시작하므로 react는 이를 후크로 식별합니다. 그렇지 않으면 후크는 일부 작업을 수행하고 무언가를 반환하는 일반 함수 또는 구성 요소처럼 작동합니다.

후크를 사용하면 코드가 더 유연해지며 다른 구성 요소에서 솔루션을 반복해서 작성하고 해당 솔루션을 호출할 필요가 없습니다.

이제 구성 요소의 렌더링 횟수를 찾기 위해 후크를 만들고 있습니다. 여기에서 우리는 현재 속성을 사용하기 위해 useRef 후크를 사용하고 있습니다.

import React, { useRef } from 'react';

const SHOW_RENDER_COUNTERS = true;

export const useRenderCounter = (): number | null => {
  const renderCount = useRef(0);
  renderCount.current = renderCount.current + 1;

  if (SHOW_RENDER_COUNTERS) {
    return renderCount.current
  }
  return null;
};

이제 이 후크를 사용하여 렌더링 횟수를 찾고자 할 때마다 다음과 같이 사용할 수 있습니다.

const FindCount = () => {
  const renderCounter = useRenderCounter();

  return (
    <>
      <SomeComponentCode />
      {renderCounter}
    </>
  );
};

이것이 우리가 사용자 지정 후크를 만들고 사용하는 방법입니다.

사용자 지정 후크의 다른 예는 다음과 같습니다.

1. 사용자가 무언가를 클릭할 때 툴팁을 표시하도록 연결합니다.

import { useState, useRef, useEffect } from 'react'

export const useTooltip = (initialState: boolean) => {
  const ref = useRef<HTMLDivElement>(null)
  const [showTooltip, setShowTooltip] = useState<boolean>(initialState)

  const handleClick = (event: any) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setShowTooltip(false)
    }
  }

  useEffect(() => {
    document.addEventListener('click', handleClick, true)

    return () => document.removeEventListener('click', handleClick, true)
  }, [ref])

  return { showTooltip, setShowTooltip, ref }
}

2. 화면 높이를 얻기 위해 연결합니다.

import { useState, useEffect, useRef, RefObject } from 'react'

interface InterfaceSize {
  size: number
  sizeRef: RefObject<HTMLDivElement>
}
const useSize = (initialValue: number): InterfaceSize => {
  const sizeRef = useRef<HTMLDivElement>(null)
  const [size, setSize] = useState<number>(initialValue)

  useEffect(() => {
    setTimeout(() => {
      if (sizeRef.current) {
        setSize(sizeRef.current?.getBoundingClientRect().height)
      }
    }, 100)
  }, [size])

  return { size, sizeRef }
}

export default useSize

3. 전달된 참조 외부를 클릭할 때 경고를 주는 후크.

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

/**
 * Hook that alerts clicks outside of the passed ref
 */
function useOutsideAlerter(ref: React.RefObject<HTMLInputElement>) {
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */
    function handleClickOutside(event: Event) {
      if (ref.current && !ref.current.contains(event.target as Node))) {
        alert("You clicked outside of me!");
      }
    }
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}

/**
 * Component that alerts if you click outside of it
 */
export default function OutsideAlerter(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return <div ref={wrapperRef}>{props.children}</div>;
}