간소화된 맞춤형 후크 반응

응용 프로그램을 빌드할 때 후크가 가장 일반적으로 사용되는 것입니다. useState, useEffect 또는 useRef와 같은 후크가 가장 일반적이지만 때로는 충분하지 않습니다. 사용자 지정 후크를 작성해야 합니다.

약간의 역사:

리액트의 모든 것이 클래스가 되기까지는 그리 오래 걸리지 않았고 React v16.8이 릴리스된 지 약 1년이 되어 Hooks가 도입되었습니다. 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다.



후크는 비슷한 기능을 더 빠르고 효과적으로 구현하는 더 간단한 코드를 가지고 있기 때문에 React를 훨씬 더 좋게 만듭니다. 클래스를 작성하지 않고도 React 상태 및 수명 주기 메서드를 구현할 수 있습니다.

클래스 기반 구성 요소와 기능적 구성 요소를 비교해 보겠습니다.

// Class Based
import "./styles.css";
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  clickHandler = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Click To Count</button>
        {this.state.count}
      </div>
    );
  }
}

export default App;

// functional components
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React v16.8 이후 한 가지 분명한 사실은 미래에 더 많은 클래스 함수를 작성할 필요가 없다는 것입니다.

사용자 지정 후크:

간단히 말해서 사용자 지정 후크는 구성 요소 내에서 실행되는 기능일 뿐입니다. 제공하는 기능 유형에 따라 다른 후크를 사용합니다. 사용자 지정 후크는 매우 강력하며 추상화 수준을 생성하고 코드를 훨씬 많이cleaner 및 reusable 만들어 복잡성을 최소화하는 데 도움이 됩니다.

이 블로그/튜토리얼에서는 useCounter.의 사용자 지정 후크를 사용하여 진행률 표시줄을 만들 것입니다.

Note: using **use** before a hook is a convention. after all it's just a function Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.

진행 표시 줄:

지정된 시간 내에 완료될 진행률 표시줄 구성 요소를 만들고 싶었습니다. 이를 위해서는 매초마다 값이 증가하고 지정된 후에 중지되는 일종의 변수가 필요합니다.

카운터 커스텀 훅:

먼저 매초마다 업데이트되는 값을 반환하는 카운터 후크를 만들어 보겠습니다.

// 📁 Timer.js
import { useState, useEffect } from "react";

function useCounter(start, end) {
  const [reach, setReach] = useState(start);

  useEffect(() => {
    let myInterval = setInterval(() => {
      setReach((prev) => {
        if (prev === end) clearInterval(myInterval);
        return ++prev;
      });
    }, 1000);
  }, []);

  return reach;
}

export default useCounter;

이전에 말했듯이 후크는 자바스크립트 함수의 멋진 이름일 뿐입니다. 위의 코드에서 먼저 카운터가 도달한 위치 또는 현재 값을 알려주는 reach 상태를 만들었습니다. 그런 다음 useEffect 하나만 실행하고 콜백을 내부 매개 변수로 사용하는 setInterval 함수를 실행합니다. 매초마다 이전 값을 증가시키는 setReach 함수가 있으며 한계에 도달하면 호출합니다. clearInterval 간격을 중지하는 함수입니다. 그리고 결국 다른 구성 요소에서 사용할 변수reach를 반환합니다.

More on setInterval here*

사용자 지정 후크를 사용하는 방법:

반응 애플리케이션 내부의 다른 후크와 동일하게 useCounter 후크를 사용할 수 있습니다. 진행률 표시줄의 경우 HTML's 고유한 progress 태그를 사용하여 진행률을 나타냅니다.

More on progress tag here

// 📁 App.js
import useCounter from "./Timer";

export default function App() {
  let count = useCounter(0, 60);

  return (
    <progress value={count} max="60">
      {" "}
    </progress>
  );
}

useCounter에는 두 개의 매개 변수가 필요합니다. 하나는 시작할 초기 값이고 다른 하나는 끝낼 위치입니다.

결론

그것은 반응 사용자 정의 후크에서 자신의 사용자 정의 후크를 만드는 것에 관한 것입니다. 사용자 정의 후크는 기능일 뿐이며 생각보다 쉽습니다. 사용자 지정 React 후크는 타사 라이브러리가 부족할 때 자체 문제를 해결할 수 있는 도구를 제공할 수 있습니다.

또한 react-use은 응용 프로그램에서 사용할 수 있는 사용자 지정 후크 번들을 제공하는 매우 유용한 라이브러리입니다. 즉시 사용할 수 있는 많은 사용자 지정 후크를 얻을 수 있습니다. 센서, UI, 애니메이션, 상태 등에 대한 후크가 있습니다. 그것을 확인하십시오.

이 가이드가 어떤 식으로든 도움이 되기를 바랍니다. 댓글을 남긴 경우 이와 같은 더 많은 콘텐츠를 보려면 내 프로필을 따르거나 내 다른 기사를 읽고 혼동이 있는 경우 ping을 보내주세요.

읽어 주셔서 감사합니다