단순 호출 & 리턴 하지않기

커스텀 훅을 작성할때 단순하게 호출해서 리턴하는 훅이라면, 훅으로 분리하지 않는것이 좋습니다.

좋지 않은 예시

//component
export const SaleSection = ({ productId }: { productId: number }) => {
  const { product, isOnSale, salePrice } = useProductSaleSection(productId);

  return (
    <div>
      <p>product: {product.name}</p>
      <p>isOnSale: {isOnSale}</p>
      <p>salePrice: {salePrice}</p>
    </div>
  );
};

//hook
export const useProductSaleSection = (productId: number) => {
  const { data: product } = useQuery(productQuery.detail(productId));

  const isOnSale = useProductIsOnSale(product);
  const salePrice = useProductSalePrice(product);

  return { product, isOnSale, salePrice };
};

문제

컴포넌트 전용 조합 훅

useProductSaleSection의 역할을 생각해보면 다음과 같습니다.

1. 쿼리를 호출하여 서버에서 product 정보 가져옴.
2. 가져온 product정보를 통해 isOnSale, salePrice 계산.

isOnSale, salePrice는 useProductSaleSection에서 아무런 역할을 하지 않고 호출되고 반환됩니다. 역할을 하지 않는 속성과 query

좋은 예시

export const SaleSection = ({ productId }: { productId: number }) => {
  const { data: product } = useQuery(productQuery.detail(productId));
  const isOnSale = useProductIsOnSale(product);
  const salePrice = useProductSalePrice(product);

  return (
    <div>
      <p>product: {product.name}</p>
      <p>isOnSale: {isOnSale}</p>
      <p>salePrice: {salePrice}</p>
    </div>
  );
};

훅 없이 컴포넌트 안에서 직접 필요한 값을 구성합니다. 각 훅의 역할이 명확하고, 불필요한 추상화 계층 없이 의도를 바로 읽을 수 있습니다.