React Hooks로 우려 사항 분리

플라톤에 의해 재발행

팔로워 : 0

React로 한동안 일해 왔다면 아마도 컨테이너 와 프레젠테이션 구성 요소 , 또는 똑똑하고 멍청한 구성 요소. 이 용어는 다음을 설명합니다. 무늬 로직에서 React 컴포넌트의 UI 레이어를 나누는 것입니다.

비즈니스 로직에서 UI를 분리하는 것은 React에만 있는 것이 아닙니다. 관심사 분리는 다음과 같은 디자인 원칙입니다. 이미 70년대에. 예를 들어 데이터베이스에 액세스하는 코드를 백엔드의 비즈니스 로직과 분리하는 것이 일반적입니다.

그래서 React에서 우리는 모든 로직을 포함하는 컨테이너 컴포넌트를 생성하여 이 문제를 해결했습니다.

React hooks의 도입으로 이에 대한 새로운 접근 방식이 있습니다. 사용자 정의 후크.

왜 컴포넌트와 로직을 분리해야 합니까?

React 구성 요소에서 논리를 분리하기 시작하기 전에 그 이유를 알아야 합니다.

모든 기능이나 구성 요소가 한 가지만 담당하는 방식으로 코드를 구성하면 많은 이점이 있습니다. 변경 및 유지 보수가 더 쉽습니다. (Dave와 Andrew는 이것을 “직교성" 그들의 책에서 실용적인 프로그래머).

이것을 React에 적용하면 구성 요소가 더 깔끔하고 체계적으로 보입니다. 예를 들어 UI를 편집하기 전에 논리의 벽을 지나 스크롤할 필요가 없습니다.

이와 같이 코드를 구성하면 탐색이 더 보기 쉽고 쉬워질 뿐만 아니라 후크를 변경해도 UI에 영향을 주지 않으며 그 반대의 경우도 마찬가지이므로 변경하기가 더 쉽습니다.

테스팅은 더 쉽게 접근할 수 있습니다. 원한다면 UI와 별도로 로직을 테스트할 수 있습니다. 그러나 나에게 가장 중요한 이점은 이 접근 방식이 내 코드를 구성하는 방법입니다.

React 훅으로 로직을 분리하는 방법

구성 요소에서 논리를 분리하기 위해 먼저 사용자 지정 후크를 만듭니다.

이 구성 요소를 예로 들어 보겠습니다. 기본 숫자와 지수의 지수 값을 계산합니다.

완전한 소스 코드를 찾을 수 있습니다 여기에서 지금 확인해 보세요..

코드는 다음과 같습니다.

export const ExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return (
    <div className="blue-wrapper">
      <input
        type="number"
        className="base"
        onChange={handleBaseChange}
        placeholder="Base"
        value={base}
      />
      <input
        type="number"
        className="exponent"
        onChange={handleExponentChange}
        placeholder="Exp."
        value={exponent}
      />
      <h1 className="result">{result}</h1>
    </div>
  );
};

이것은 이미 괜찮아 보일 수 있지만 이 튜토리얼을 위해 그림 여기에 더 많은 논리가 있습니다.

첫 번째 단계로 우리는 로직을 커스텀 훅으로 이동 그리고 그것을 우리의 컴포넌트 안에서 호출합니다.

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return {
    base,
    exponent,
    result,
    handleBaseChange,
    handleExponentChange,
  };
};

export const ExponentCalculator = () => {
  const {
    base,
    exponent,
    result,
    handleExponentChange,
    handleBaseChange,
  } = useExponentCalculator();

  // ...
};

이 후크를 다음으로 이동할 수 있습니다. 별도 파일 관심사의 더 두드러진 분리를 위해.

추가적으로, 우리는 우리의 후크를 더 작고 재사용 가능한 함수로 분리할 수 있습니다. 이 경우에만 추출할 수 있습니다. calculateExponent.

useExpontCalculator.js

const calculateExponent = (base, exponent) => base ** exponent;

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = calculateExponent(base, exponent).toFixed(2);

  // ...
};

이러한 기능을 테스트하는 것은 첫 번째 예제에서 전체 구성 요소의 코드를 테스트하는 것보다 훨씬 쉽습니다. React 구성 요소를 지원할 필요조차 없는 Node.js 테스트 라이브러리로 테스트할 수 있습니다.

이제 구성 요소 및 후크에 대한 코드에 프레임워크별 코드(React)가 있고 나중에 정의한 다른 기능(프레임워크에 구애받지 않음)에 비즈니스 로직이 있습니다.