React - 해당 종속성을 종료합니다!

사용자 정의 후크와 기능 구성 요소의 차이점은 무엇입니까?

(일반적인) 문제

구성 요소가 있고 해당 상태를 제어해야 하며 잘 작동합니다.

function BaseExample() {
  const [option, setOption] = useState('two');

  const handleChange = (el) => {
    setOption(el.target.value);
  };

  return (
    <div>
      <select
        onChange={handleChange}
        value={option}
      >
        {[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
          { value: 'three', label: 'Three' },
        ].map((option) => (
          <option
            key={option.value}
            value={option.value}
          >
            {option.label}
          </option>
        ))}
      </select>
      <div>{option ? `Selected: ${option}` : 'No selection'}</div>
    </div>
  );
}

하지만 리팩토링을 시도하면 어떻게 될까요?

function RefactoredExample() {
  const [option, setOption] = useState('two');

  const handleChange = (el) => {
    setOption(el.target.value);
  };

  return (
    <div>
      {SelectComponent(handleChange, option)}
      <div>{option ? `Selected: ${option}` : 'No selection'}</div>
    </div>
  );
}

function SelectComponent(handleChange, option) {
  return (
    <select
      onChange={handleChange}
      value={option}
    >
      {[
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' },
        { value: 'three', label: 'Three' },
      ].map((option) => (
        <option
          key={option.value}
          value={option.value}
        >
          {option.label}
        </option>
      ))}
    </select>
  );
}

이제 너무 많은 것을 알아야 하는 구성 요소와 자체적으로 아무것도 할 수 없는 다른 구성 요소가 있습니다.

사용자 지정 후크 입력

규칙에 따라 일반적인 기능 구성 요소는 JSX를 반환하고 사용자 정의 후크는 무엇이든 반환할 수 있습니다.

아무것? 예, JSX도 있습니다.

function RefactoredWithHookExample() {
  const { option, SelectComponent } = useSelectComponent();

  return (
    <div>
      <SelectComponent />
      <div>{option ? `Selected: ${option}` : 'No selection'}</div>
    </div>
  );
}

function useSelectComponent() {
  const [option, setOption] = useState('two');

  const handleChange = (el) => {
    setOption(el.target.value);
  };

  const SelectComponent = () => (
    <select
      onChange={handleChange}
      value={option}
    >
      {[
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' },
        { value: 'three', label: 'Three' },
      ].map((option) => (
        <option
          key={option.value}
          value={option.value}
        >
          {option.label}
        </option>
      ))}
    </select>
  );

  return { option, SelectComponent };
}

이제 SelectComponent는 상태를 제어하는 ​​데 필요한 모든 것을 알고 있으며 부모 구성 요소는 필요한 것만 알고 있습니다.

무엇이든 클로저와 함께 진행됩니다!

이와 같은 예는 거의 흥미롭지 않지만 후크에서 무엇이든 반환할 수 있음을 기억하십시오!

뿐만 아니라 이것은 클로저로 작동할 수 있으므로 다음과 같은 것을 가질 수 있습니다.

function RefactoredWithClosureHookExample() {
  const { option, SelectComponent } = useSelectComponent({
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
    initial: 'two',
  });

  return (
    <div>
      <SelectComponent
        selectProps={{ style: { color: 'red' } }}
        optionProps={{ style: { color: 'green' } }}
      />
      <div>{option ? `Selected: ${option}` : 'No selection'}</div>
    </div>
  );
}

function useSelectComponent({ options, initial }) {
  const [option, setOption] = useState(initial);

  const handleChange = (el) => {
    setOption(el.target.value);
  };

  const SelectComponent = ({ selectProps, optionProps }) => (
    <select
      onChange={handleChange}
      value={option}
      {...selectProps}
    >
      {options.map((option) => (
        <option
          key={option.value}
          value={option.value}
          {...optionProps}
        >
          {option.label}
        </option>
      ))}
    </select>
  );

  return { option, SelectComponent };
}

물론 이것은 과장이었다. 그러나 무엇이 가능한지 이해하면 문제에 대한 더 쉬운 해결책을 찾을 수 있을 것입니다.


표지 사진 작성자: Jamie Matociños on Unsplash