분류 Reactjs

Top 10 React Hook 라이브러리

컨텐츠 정보

  • 조회 297 (작성일 )

본문

Hooks가 와서 React 커뮤니티를 휩쓸었습니다. 처음 출시 된 지 오래되었으므로 지원 라이브러리가 많이 있습니다. React와 관련된 모든 것을 검색 할 때 "hooks"단어를 사용하지 않는 것은 어렵습니다. 아직 하지 않았다면 가능한 한 빨리 코드베이스로 가져와야 합니다. 코딩 생활을 훨씬 쉽고 즐겁게 만들 것입니다.


https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065


깔끔한 코드 스타일, 가독성, 유지 보수성, 적은 코드 라인 및 재사용 성을 유지하는 것은 React 개발에서 중요합니다. 이 블로그는 즉시 사용을 시작해야 하는 상위 10 개의 React Hook 라이브러리를 제공합니다. 개인 취향에 따라 결정됩니다. 더 이상 지체하지 않고 출발합시다.


1. use-http 


use-http는 Fetch API를 대체하는 데 사용되는 매우 유용한 패키지입니다. 고품질로 작성되고 유지됩니다. 그것은 당신의 코딩을 훨씬 더 간단하고 이해하기 쉽게, 더 정확하게는 데이터 소비 부분을 만듭니다. 후크 자체는 TypeScript를 사용하며 SSR 및 GraphQL도 지원합니다. 응답,로드, 오류 데이터 및 Get, Post, Put, Patch 및 Delete와 같은 다양한 요청 방법을 반환합니다.


제공하는 주요 기능은 다음과 같습니다.


  • Request/Response interceptors
  • Suspense (experimental currently)
  • Retry functionality
  • Caching

GitHub readme와 함께 CodeSandbox 예제 및 Youtube 비디오로 잘 문서화 되어 있습니다.


사용 예 :


import useFetch from "use-http"

const Example = () => {
  const [todos, setTodos] = useState([])
  const { get, post, response, loading, error } = useFetch("https://example.com")

  useEffect(() => { get("/todos") }, [])

  const addTodo = async () => {
      await post("/todos", { title: "example todo" });
      if (response.ok) setTodos([...todos, newTodo])
  }

  return (
    <>
      <button onClick={addTodo}>Add Todo</button>
      {error && 'Error!'}
      {loading && 'Loading...'}
      {todos.map(todo => (
        <span key={todo.id}>{todo.title}</span>
      )}
    </>
  );
};


2. useMedia 


CSS 미디어 쿼리를 추적하는 방법이 필요 했습니까? useMedia 후크는 문제에 대한 단순한 접근 방식을 제공합니다. 정확히 그것을 추적하는 감각 고리입니다. 미디어 쿼리는 앱이나 웹 사이트의 응답성뿐 아니라 정말 중요합니다.


TypeScript로 작성되어 지원을 제공합니다. 패키지에는 후크의 테스트 방법과 사용법을 설명하는 잘 정의 된 문서가 있습니다.


사용 예 :


import useMedia from 'use-media';

const Example = () => {
  const isWide = useMedia({minWidth: '1000px'});

  return (
    <span>
      Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"}
    </span>
  );
};


3. Constate 


Constate는 React Context까지 로컬 상태를 해제하는 후크 패키지입니다. 이는 모든 구성 요소의 모든 상태를 최소한의 노력으로 컨텍스트에 쉽게 적용 할 수 있음을 의미합니다. 이는 여러 지점에서 동일한 상태를 사용하거나 여러 구성 요소에 동일한 상태를 제공하려는 경우에 유용합니다. 이름은 문맥과 상태를 병합하는 말장난에서 비롯됩니다. Typescript로 작성되었으며 크기가 매우 작습니다. 문서는 그렇게 상세하지는 않지만 작업을 완료합니다.


사용 예 :

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

// custom hook
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
}

// hook passed in constate
const [CounterProvider, useCounterContext] = constate(useCounter);

function Button() {
  // use the context
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button>;
}

function Count() {
  // use the context
  const { count } = useCounterContext();
  return <span>{count}</span>;
}

function App() {
  // wrap the component with provider
  return (
    <CounterProvider>
      <Count />
      <Button />
    </CounterProvider>
  );


4. Redux hooks 


Redux는 React 개발자 모두는 아니지만 많은 사람들에게 잘 알려진 도구입니다. 응용 프로그램 전체에서 전역 상태 관리자로 사용됩니다. React의 초기 출시 후 두 달 만에 후크와 함께 탑재되었습니다. 기존 connect() 메서드를 사용하여 HOC (Higher Order Component) 패턴에 대한 대안을 제공합니다.


제공되는 가장 주목할만한 후크는 다음과 같습니다.


  • useSelector
  • useDispatch
  • useStore

문서는 매우 훌륭하고 약간 복잡하지만 사용을 시작하는 데 필요한 모든 정보를 제공합니다.


사용 예 :

import {useSelector, useDispatch} from "react-redux";
import React from "react";
import * as actions from "./actions";

const Example = () => {
const dispatch = useDispatch()
const counter = useSelector(state => state.counter)

return (
<div>
   <span>
     {counter.value}
   </span>
   <button onClick={() => dispatch(actions.incrementCounter)}>
     Counter +1
   </button>
</div>
);
};


5. React hook form 


React hook 양식은 Formik 및 Redux 양식과 유사한 양식 후크 라이브러리이지만 더 좋습니다! 훨씬 더 간단한 구문, 속도, 더 적은 rerender 및 더 나은 유지 보수성으로 GitHub 사다리를 오르기 시작했습니다. 크기가 작고 성능을 염두에 두고 제작되었습니다. 라이브러리는 훌륭한 양식 작성기를 제공합니다! React hooks 라이브러리 인 14.8k에 대한 가장 많은 양의 GitHub 시작 중 하나가 있습니다.


사용 예 :

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    // logs {firstName:"exampleFirstName", lastName:"exampleLastName"}
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register({ required: true })} />
      {errors.lastName && <span>"Last name is a required field."</span>}
      <input name="age" ref={register({ required: true })} />
      {errors.age && <span>"Please enter number for age."</span>}
      <input type="submit" />
    </form>
  );
}


6. useDebounce 


useDebounce는 디 바운싱에 사용되는 작은 후크를 나타냅니다. 함수 실행을 나중에 연기하는 데 사용됩니다. 데이터를 가져 오는 입력 및 양식에 자주 사용됩니다.


사용 예 :

import React, { useState } from "react";
import { useDebounce } from "use-debounce";

export default function Input() {
  const [text, setText] = useState("Hello");
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={"Hello"}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Value: {text}</p>
      <p>Debounced value: {value}</p>
    </div>
  );
}


7. useLocalStorage 


useLocalStorage는 위와 같은 작은 후크입니다. localStorage 내에서 데이터를 추출하고 설정하는 데 정말 유용합니다. 조작이 쉽습니다.

여러 탭에서 자동 JSON 직렬화 및 동기화를 제공하며 TypeScript로 작성되어 유형을 제공합니다.


문서는 양질의 방식으로 작성되었으며 확장 된 예제를 통해 이해할 수 있습니다.


사용 예 :

import React, { useState } from "react";
import { writeStorage } from '@rehooks/local-storage';

export default function Example() {
  let counter = 0;
  const [counterValue] = useLocalStorage('counterValue');

  return (
    <div>
      <span>{counterValue}</span>
      <button onClick={() => writeStorage('i', ++counter)}>
        Click Me
      </button>
    </div>
  );
}


8. usePortal 


usePortal을 사용하면 드롭 다운, 모달, 알림 팝업, 툴팁 등을 매우 쉽게 만들 수 있습니다! 앱의 DOM 계층 외부에 요소를 생성하는 기능을 제공합니다 (포털 작동 방식 참조). 후크는 동형이므로 SSR과 함께 작동합니다. TypeScript로 작성되었으며 기본 제공 상태가 있습니다. 또한 포털 스타일의 전체 사용자 정의 및 기타 옵션을 제공합니다.


것을 위해 작성된 문서는 라이브러리 / 후크 사용을 시작하기에 충분한 많은 예제를 보여줍니다.


사용 예 :

import React, { useState } from "react";
import usePortal from "react-useportal";

const Example = () => {
    const { ref, openPortal, closePortal, isOpen, Portal } = usePortal()

    return (
      <>
         <button ref={ref} onClick={() => openPortal()}>
            Open Portal
         </button>
          {isOpen && (
            <Portal>
              <p>
                This Portal handles its own state.{' '}
                <button onClick={closePortal}>Close me!</button>, hit ESC or
                click outside of me.
              </p>
            </Portal>
          )}
       </>
 )
}



9. useHover 


useHover는 React 요소가 호버링 되는지 여부를 결정하는 React 상태 후크입니다. 사용하기 쉽고 직관적입니다. 라이브러리는 작고 사용하기 간단하지만 충분히 창의적이라면 강력 할 수 있습니다.


호버 효과의 지연도 제공합니다. TypeScript가 지원됩니다. 문서는 자세하지 않지만 공정하게 사용하는 방법을 보여줍니다.


사용 예 :

import useHover from "react-use-hover";

const Example = () => {
  const [isHovering, hoverProps] = useHover();
  return (
    <>
      <span {...hoverProps} aria-describedby="overlay">Hover me</span>
      {isHovering ? <div> Im a little tooltip! </div> : null}
    </>
  );
}


10. React router hooks 


React Router는 React에서 가장 많이 사용되는 라이브러리 중 하나입니다. 라우팅 및 앱 URL 기록 가져 오기 등에 사용됩니다. Redux와 함께 유용한 데이터를 가져 오기 위한 후크를 구현했습니다.


제공되는 후크는 다음과 같습니다.

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

그 이름은 매우 자명합니다. UseHistory는 새로운 경로로 푸시하는 푸시와 같은 앱의 기록 및 메서드 데이터를 가져옵니다. UseLocation은 현재 URL을 나타내는 개체를 반환합니다. UseParams는 현재 경로의 URL 매개 변수의 키-값 쌍 개체를 반환합니다. 마지막으로, useRouteMatch는 현재 URL을 문자열 또는 다른 옵션의 객체가 될 수 있는 주어진 URL과 일치 시키려고 시도합니다.


문서는 훌륭하고 많은 예제로 작성되었습니다.


사용 예 :

import { useHistory, useLocation, useRouteMatch } from "react-router-dom";

const Example = () => {
let history = useHistory();
let location = useLoction();
let isMatchingURL = useRouteMatch("/post/11");

function handleClick() {
history.push("/home");
}

return (
    <div>
        <span>Current URL: {location.pathname}</span>
        {isMatchingURL ? <span>Matching provided URL! Yay! </span> : null}
        <button type="button" onClick={handleClick}>
            Go home
        </button>
</div>
);
}


거기에 훨씬 더 많은 후크 라이브러리가 있지만 이것에 대해 이야기하기로 결정했습니다. 꼭 한번 시도해보세요. 후회하지 않을 것을 약속 드립니다. 당신이 그들을 많이 좋아한다면 어떤식으로든 가서 그들을 지원하십시오. 후크는 여전히 비교적 새로운 방법이지만 여기에 남아 있습니다. 앞으로 몇 달 동안 우리는 훨씬 더 훌륭한 라이브러리와 후크 예제가 표면으로 올라갈 것으로 기대합니다.


이 게시물이 흥미롭고 새로운 것을 배웠기를 바랍니다. 후크에 대한 추가 탐색을 즐기십시오! 행복한 개발.