커스텀 훅으로 Redux 계산 값을 추가하는 깔끔한 방법

react 프로젝트를 시작하는 사람은 일반적으로 글로벌 상태 라이브러리redux 또는 mobx를 결정해야 합니다.redux는 mobx보다 github에 더 많은 별을 가지고 있지만 mobx는 @computed 와 함께 고유한 점이 있습니다. 자바스크립트 데코레이터 패턴으로 계산된 값을 얻는 쉬운 방법입니다. 물론 redux는 reselect 라이브러리를 사용하여 동일한 작업을 수행할 수 있습니다.
react 'hook'을 구현하여 개발자가 쉽게 계산된 값을 만들 수 있습니다.

서버에서 가져온 가격 및 할인 데이터를 유지하고 있다고 가정합니다fruitStore.

const initialState: FruitStore = {
  apple: { discount: 0.03, price: 1000 },
  orange: { discount: 0.12, price: 3000 },
  grape: { discount: 0.2, price: 8000 },
  ...
};

이 데이터는 Tag Component에서 3가지 방식으로 표시됩니다.

할인된 가격

결제에 대한 최종 청구 가격

'%'로 읽을 수 있는 할인 값

이를 위해 아래와 같이 계산해야 합니다.

const discountedPrice: number = price * discount;
const billingPrice: number = price * (1 - discount);
const discountPercent: string = `${discount * 100} %`;

이 값을 사용하는 여러 구성 요소가 있는 경우 ctrl + c , ctrl + v 가 있습니다. 코드를 읽고 다시 쓰기가 더 어려워집니다.
저장소가 이러한 모든 데이터를 redux에 보관한다고 생각할 수 있습니다. 그러나 중첩된 개체 구조를 강제로 적용하고 뷰 구성 요소가 증가함에 따라 더 복잡해질 수 있습니다.

그럼 useMemo와 커스텀 훅으로 간단하고 효율적인 코드를 작성해보자.

// custom hook
function useFruitTag(fruit: string) {
  const { discount, price } = useSelect(({ fruitStore }) => fruitStore[fruit]);

  const discountedPrice = useMemo(() => price * discount, [discount, price]);
  const billingPrice = useMemo(() => price * (1 - discount), [discount, price]);
  const discountPercent = useMemo(() => `${discount * 100} %`, [discount]);

  return {
    discountedPrice,
    billingPrice,
    discountPercent,
  };
}

// component
function AppleTag() {
  const { discountedPrice, billingPrice, discountPercent } = useFruitTag('apple');

  return (
    <div>
      <h1>Apple</h1>
      <p>{discountedPrice}</p>
      <p>{billingPrice}</p>
      <p>{discountPercent}</p>
    </div>
  );
}

이 방법은 다른 라이브러리reselect 또는 mobx 없이 계산된 값을 만듭니다. useMemo 를 사용하면 캐시된 값을 사용할 수 있고 보기 및 과일이 증가하더라도 쉽게 코드를 유지할 수 있습니다. 그리고 가장 중요한 것은 다양한 논리를 원하는 대로 구분할 수 있다는 것입니다.

추신
이 기사는 useMemo가 reselect 또는 무엇을 대체 할 수 있다는 것을 의미하지 않습니다. 자세한 내용은 here에서 읽을 수 있습니다.