useComponent 패턴을 소개하고 싶습니다. 최근에 우리가 만들고 있는 구성 요소에서 많은 관심을 받은 패턴입니다.

목표

좋은 React 컴포넌트를 위한 몇 가지 공통 목표:

구성 요소는 재사용할 수 있어야 합니다.

구성 요소는 컨테이너로 제어할 수 있어야 합니다.

무늬

다음 두 가지 항목을 제공합니다.

Component  : 재사용하려는 구성 요소입니다. 이것은 부모가 구성 요소를 렌더링하는 데 사용합니다.

useComponent  : 구성 요소가 작동하는 데 필요한 모든 것을 반환하는 사용자 지정 후크입니다. 이것은 구성 요소를 사용하려는 부모가 사용하기 위한 것입니다.

동기 부여 예

겸손한Counter 구성 요소를 고려하십시오.

function Counter() {
  // Some hooks the component needs
  const [count, setCount] = useState(0);

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

이 구성 요소는 기능적이지만 렌더링 기능 내에서 논리를 잠그므로 실제로 재사용할 수 없습니다. 두 개의 카운터를 사용하고 총 개수를 표시하고 싶다고 가정하면 💩 운이 좋지 않습니다.

동기 부여 솔루션

솔루션: Counter 구성 요소에 필요한 모든 논리를 useCounter 사용자 정의 후크 기능으로 이동합니다.

다음은 useCounter/Counter (및 유추된 TypeScript CounterProps 🌹) 콤보입니다.

// Some hooks the component needs
export function useCounter() {
  const [count, setCount] = useState(0);
  return {count, setCount};
}

// Infer the props
export type CounterProps = {
  use: ReturnType<typeof useCounter>
}

// The rendering of the component
export function Counter({ use }: CounterProps) {

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

재사용 시연

두 개의 카운터를 사용하고 총 개수를 표시하고 싶다고 가정합니다. 쉬워요:

export function App() {

  const counterOne = useCounter();
  const counterTwo = useCounter();

  return (
    <div>
      <Counter use={counterOne}/>
      <Counter use={counterTwo}/>

      {/* Able to use the counters for any additional logic */}
      <div>Total Count: {counterOne.count + counterTwo.count}</div>
    </div>
  );
}

useCounter 함수는 초기 값을 쉽게 취할 수 있습니다. 또한 개별App의 호출을 가로챌 수 있는 로컬 기능을 Counter 구성 요소에 생성할 수 있습니다.

인기의 이유

인기가 많은 이유는 두 가지입니다.

이해하기 쉬움: 구성 요소를 논리 및 렌더링 기능으로 분할하여 자연스럽게 작성하는 것입니다. 이것은 또한 비즈니스 로직과 그것이 어떻게 보이는지에 대한 코드 리뷰를 개발하고 수행하는 동안 다루기 쉽게 만듭니다.

React만 사용: 구성 요소는 타사 라이브러리 종속성 없이 작동합니다. 이를 통해 팀 간에 훨씬 더 많이 재사용할 수 있습니다.

추신: mobx와 hooks 비교에 대한 비디오: