사용자 지정 React 후크 소개

몇 년 동안 React를 작성해 온 사람으로서 커스텀 후크의 즐거움을 발견하는 데 너무 오랜 시간이 걸렸습니다. 사실 3년이 넘게 걸렸습니다! 이 게시물에서는 React의 가장 강력한 기능 중 하나를 활용하는 방법을 보여드리겠습니다.

후크란 무엇입니까?

후크는 React의 렌더링 수명 주기에 연결할 수 있는 아주 단순한 기능입니다. 가장 일반적인 후크useState를 간단히 살펴보겠습니다.

const [state, setState] = useState(0)

보시다시피 useState는 React에 연결되어 상태 관리를 위한 인터페이스를 제공합니다. 그렇지 않으면 연관될 수 있는 복잡성을 완전히 추상화합니다.

후크를 재사용 가능한 추상화로 생각하면 더 쉽게 추론할 수 있습니다. 구성 요소는 재사용 가능한 마크업이므로 후크는 재사용 가능한 로직일 뿐입니다!

나는 React의 내장 후크를 원자적이라고 부르는 것을 좋아합니다. 우리는 일반적으로 이를 사용하고 결합하여 고유한 사용자 지정 후크를 만듭니다.

첫 번째 맞춤 후크

전환 가능한 구성 요소(모달, 드롭다운 등)의 상태를 관리하는 기본 사용자 지정 후크를 빌드해 보겠습니다.

useToggle.ts

import { useState } from "react";

function useToggle(initial = false) {
  const [state, setState] = useState(initial);

  return [
    state,
    {
      open: () => setState(true),
      close: () => setState(false),
      toggle: () => setState((state) => !state)
    }
  ] as const;
}

export default useToggle;

Quick tip: using as const on our return value tells TypeScript to infer the type as a readonly tuple instead of a union type array! 😁

이 예에서 우리가 한 것은 사용 상태 후크를 구성 요소를 오염시키는 일부 논리로 래핑하는 것입니다. 구현하기가 얼마나 쉬운지 보십시오.

App.tsx

function App() {
  const [state, { open, close, toggle }] = useToggle();

  return (
    <div className="App">
      <button onClick={open}>Open</button>
      <button onClick={close}>Close</button>
      <button onClick={toggle}>Toggle</button>
      {state && <div>Hello!</div>}
    </div>
  );
}

...그리고 그게 다야! 나는 이것을 본 후에 다른 후크를 구현하는 방법을 볼 수 있기를 바랍니다 - try useQueue 및 useStack .

향후 게시물에서는 좀 더 복잡한 동작을 구현하는 방법과 ref, 외부 데이터 등을 처리하기 위한 일반적인 디자인 패턴에 대해 자세히 설명하겠습니다.