useComponent 패턴 소개

"useComponent"패턴에 익숙할 것입니다. 에 의해 처음 소개되었습니다.

나는 이 패턴이 많은 경우에 유용하다는 것을 알았고 기본적인 소개가 도움이 될 것이라고 생각했습니다. 이 게시물에서는 이 패턴의 간단한 예를 아래에 간략하게 설명합니다.

import React, { useState } from "react";

const useRadioButtons = ({ options = [], onChange = () => {}} = {}) => {
  const [selectedOption, setSelectedOption] = useState(options[0]);

  const onChangeOption = (event) => {
    setSelectedOption(event.target.value);
    onChange(event.target.value);
  };

  return {
    props: {
      options,
      onChangeOption,
      selectedOption,
    },
    RadioButtons,
    selectedOption,
  };
};

const RadioButtons = ({ options, onChangeOption, selectedOption }) => {
  return (
    <div>
      {options.map((option) => (
        <>
          <input
            checked={selectedOption === option}
            onChange={onChangeOption}
            type="radio"
            value={option}
          />
          {option}
        </>
      ))}
    </div>
  );
};

export default useRadioButtons;

import React from "react";

import useRadioButtons from "./use-radio-buttons";

function Foo() {
  const { props, RadioButtons, selectedOption } = useRadioButtons({
    options: [`A`, `B`, `C`],
  });

  return (
    <>
      <RadioButtons {...props} />
      {selectedOption}
    </>
  );
}

export default Foo;

그것은 무엇입니까?

RadioButtons 구성 요소 자체는 매우 간단합니다. 옵션 배열, onChange 함수 및 현재 값을 허용하고 모든 옵션이 포함된 라디오 버튼을 반환합니다.

반면에 useRadioButtons는 흥미로운 부분입니다.

이 패턴의 목적은 모든 상태, 상태에 의존하는 기능 및 후크(특히 구성 요소에 특별히 속하는 모든 useEffects)를 포함하여 부모에서 모든 것을 설정할 필요가 없도록 하는 것입니다.

useRadioButtons는 selectedOption 및 onChangeOption 함수에 대한 useState를 설정합니다. RadioButtons에 직접 전달할 수 있는 props 객체와 부모가 사용할 selectedOption 및 RadioButtons 함수를 반환합니다.

부모의 배관이 적음

const { props, RadioButtons, selectedOption } = useRadioButtons({
    options: [`A`, `B`, `C`],
  });
...

<RadioButtons {...props}/>

이 간단한 RadioButton 구성 요소가 필요한 모든 부모 내부의 모든 상태를 선언하는 대신 useRadioButtons를 한 번만 호출하여 모든 것을 설정할 수 있습니다. 부모를 읽으면 RadioButtons 구성 요소에 속하는 것과 이 구성 요소에서 반환하는 항목인 selectedOption이 정확히 무엇인지 명확하게 알 수 있습니다. 부모에 모든 상태를 포함할 수 있지만 때로는 구성 요소가 제공하는 값이 무엇이든 원하는 경우가 있습니다.

후크에 함수 전달

이 패턴은 또한 필요한 부모-자식 관계를 만들 수 있는 충분한 기회를 제공합니다.

하나는 내가 선택적 onChange 함수를 전달한다는 사실을 눈치채셨을 것입니다. 이것은 변경 시 특정 기능을 트리거해야 하는 경우에 가장 유용하지만, 재미있게 사용하고 경고를 던질 수 있습니다(이 작업을 수행하지 않음).

  const { props, RadioButtons, selectedOption } = useRadioButtons({
    options: [`A`, `B`, `C`],
    onChange: (selectedOption) => alert(selectedOption),
  });

후크에서 함수 가져오기

후크 내에서 무언가를 변경하기 위해 부모로부터 함수를 호출하는 것은 어떻습니까? useImperativeHandle(내가 켜짐)을 사용하거나 함수를 설정하고 반환할 수 있습니다.

const useRadioButtons = ({ options = [], onChange = () => {}} = {}) => {
  ....
  const reset = () => {
    setSelectedOption(options[0]);
  };

  return {
    props: {
      options,
      onChangeOption,
      selectedOption,
    },
    RadioButtons,
    selectedOption,
    reset,
  };
};

function Foo() {
  const { props, RadioButtons, selectedOption, reset } = useRadioButtons({
    options: [`A`, `B`, `C`],
    onChange: (selectedOption) => alert(selectedOption),
  });

  return (
    <>
      <RadioButtons {...props} />
      <button onClick={() => reset()}>Reset</button>
      {selectedOption}
    </>
  );
}

이것은 옵션을 첫 번째 옵션으로 재설정하는 기능을 제공합니다(이 예에서는 버튼에 바인딩됨). 보너스로 이 함수는 항상 구성 요소의 올바른 인스턴스를 참조합니다. 심판을 통과하는 것에 대해 걱정할 필요가 없습니다.

이것 하나만 하지마!

구성 요소의 인스턴스를 반환하지 마십시오.

import React, { useState } from "react";

const useRadioButtons = ({ options = {}, onChange = () => {}} = {}) => {
  const [selectedOption, setSelectedOption] = useState(options[0]);

  const onChangeOption = (event) => {
    setSelectedOption(event.target.value);
    onChange(event.target.value);
  };

  return {
    RadioButtons: () => (
      <RadioButtons
        {...{
          options,
          onChangeOption,
          selectedOption,
        }}
      />
    ),
    selectedOption,
  };
};

function Foo() {
  const { RadioButtons, selectedOption } = useRadioButtons({
    options: [`A`, `B`, `C`],
  });

  return (
    <>
      <RadioButtons />
      {selectedOption}
    </>
  );
}

이것은 작동하고 멋지게 보이지만 렌더링할 때마다 RadioButton을 다시 만듭니다. 이것은 성능 문제를 일으킬 수 있을 뿐만 아니라 더 복잡한 상태와 후크를 useRadioButtons에 넣으면 상당한 골칫거리가 될 것입니다.

useCallback으로 래핑하고 대부분 안정적인 인스턴스를 얻을 수 있지만 위험은 스스로 감수해야 합니다. 소품을 반환하고 구성 요소에 퍼뜨리면 예상할 때만 다시 렌더링됩니다. 마음의 평화를 위해 그만한 가치가 있으며 그렇게 하기 위해 코드 줄을 추가하지 않습니다.

    RadioButtons: useCallback(() => (
      <RadioButtons
        {...{
          options,
          onChangeOption,
          selectedOption,
        }}
      />
    )),

결론

다음에 스마트하고 재사용 가능한 구성 요소를 원할 때 이 패턴을 사용하는 것을 고려하고 개선할 수 있는지 확인하십시오. 만능 솔루션은 아니지만 삶을 조금 더 쉽게 만들어 줄 수 있는 사용 사례가 있습니다. 이 간단한 소개가 도움이 되었기를 바랍니다!

향후 게시물에서 후크를 사용하여 다양한 옵션을 사용하여 많은 인스턴스를 설정하는 방법에 대해 논의하고, 발생할 수 있는 몇 가지 문제에 대해 설명하고, 이를 구성 요소가 원하는 작업을 수행하도록 하는 다른 방법과 비교할 것입니다. 그들이 할.