4. 조립 테크닉

// 초기 Card: 단순함 function ProductCard({ imageUrl, title, price }) { return ( <div className="card"> <img src={imageUrl} alt={title} /> <h3>{title}</h3> <p>{price}원</p> </div> ); }

// 점점 비대해지는 Card (Bad Example - No IoC) ❌ function ProductCard({ imageUrl, title, price, // 좋아요 관련 props likeCount, isLiked, onClickLike, // 장바구니 관련 props showCartButton, onAddToCart, isAddingToCart, // 할인 관련 props discountRate, originalPrice, // ... 또 다른 기능 추가 시 props는 계속 늘어남 ... }) { return ( <div className="card"> <img src={imageUrl} alt={title} /> <h3>{title}</h3> {discountRate && <p className="discount">{discountRate}% 할인</p>} <p>{price}원 {originalPrice && <s className="original-price">{originalPrice}원</s>}</p> {/* --- 부가 기능 영역 --- */} <div className="card-addons"> <button onClick={onClickLike} disabled={isLiked}> ❤️ {likeCount} </button> {showCartButton && ( <button onClick={onAddToCart} disabled={isAddingToCart}> {isAddingToCart ? '담는중...' : '장바구니 담기'} </button> )} {/* ... 다른 버튼이나 정보들 ... */} </div> </div> ); }

// 제어권을 역전시킨 Card (Good Example - With IoC) ✅ function ProductCard({ imageUrl, title, price, // 부가 기능이 들어갈 '자리'만 제공 bottomAddon // 또는 그냥 children을 활용해도 됨 }) { return ( <div className="card"> <img src={imageUrl} alt={title} /> <h3>{title}</h3> <p>{price}원</p> {/* --- 부가 기능 영역 --- */} <div className="card-addons"> {/* 외부에서 무엇을 렌더링할지 제어권을 가짐 */} {bottomAddon} </div> </div> ); } // 사용처 (부모 컴포넌트) function ProductListPage() { // ... 좋아요, 장바구니 관련 상태와 핸들러는 여기서 관리 ... const { handleLikeClick, isLiked, likeCount } = useLikeFeature(productId); const { handleAddToCart, isAdding } = useCartFeature(productId); return ( <ProductCard imageUrl={product.imageUrl} title={product.title} price={product.price} // 'renderBottomAddon' 자리에 무엇을 넣을지 부모가 결정하고 제어! bottomAddOn={ <> <button onClick={handleLikeClick} disabled={isLiked}> ❤️ {likeCount} </button> <button onClick={handleAddToCart} disabled={isAdding}> {isAdding ? '담는중...' : '장바구니 담기'} </button> </> } /> ); }

// entities/product/ui/ProductCardWithCart_BAD.tsx ❌ // "규칙만 지키면 돼!" - 잘못된 생각 import React from 'react'; import { Product } from '../types'; // 엔티티 타입 // import { useAddToCart } from '@/features/add-to-cart'; // <-- 원래 여기 있어야 할 훅 import { useCartStore } from '@/shared/stores/cart'; // <-- 어? 엔티티가 갑자기 카트 스토어를 아네? // 장바구니 로직이 엔티티 레이어로 침투! function useAddToCart_BAD(productId) { const addToCart = useCartStore((state) => state.addToCart); // ... 로딩, 에러 상태 등 장바구니 관련 로직 ... return { /* ... */ }; } interface Props { product: Product; // 장바구니 버튼 표시에 필요한 추가 Props... 점점 늘어날 예정 } // ProductCard가 장바구니 책임을 떠안음 export function ProductCardWithCart_BAD({ product }: Props) { const { /* ... */ } = useAddToCart_BAD(product.id); return ( <div className="product-card"> {/* 상품 정보 표시 */} <img src={product.imageUrl} /> <h3>{product.name}</h3> <p>{product.price}원</p> {/* 장바구니 버튼 및 관련 로직 직접 포함 */} <button onClick={handleAddToCart} disabled={isLoading}> {isLoading ? '...' : 'Add to Cart'} </button> </div> ); }

// entities/product/ui/ProductCard_StillBAD.tsx ❌ import React from 'react'; import { Product } from '../types'; interface Props { product: Product; // 장바구니 "피처"에 필요한 모든 것을 Props로 요구 showCartButton: boolean; onAddToCart: (productId: number) => void; isAddingToCart: boolean; // 위시리스트 기능이 추가되면? isWishlisted, onAddToWishlist, isAddingToWishlist... props 폭발! } // ProductCard가 여전히 장바구니 버튼의 '구현 방식'을 알고 있음 export function ProductCard_StillBAD({ product, showCartButton, onAddToCart, isAddingToCart, }: Props) { return ( <div className="product-card"> {/* 상품 정보 표시 */} <img src={product.imageUrl} /> <h3>{product.name}</h3> <p>{product.price}원</p> {/* 장바구니 버튼 렌더링 로직을 직접 포함 */} {showCartButton && ( <button onClick={() => onAddToCart(product.id)} disabled={isAddingToCart}> {isAddingToCart ? '...' : 'Add to Cart'} </button> )} {/* 위시리스트 버튼이 필요하면 여기에 또 if문 추가? */} </div> ); } // widgets/product-list/ui/ProductList.tsx import { ProductCard_StillBAD } from '@/entities/product'; import { useAddToCart } from '@/features/add-to-cart'; // 피처 로직 가져옴 function ProductList({ products }) { const { mutate: addToCart, isPending } = useAddToCart(); return ( <div> {products.map((product) => ( <ProductCard_StillBAD key={product.id} product={product} // 위젯이 엔티티에게 피처의 세부 구현을 위한 props를 주입 showCartButton={true} onAddToCart={addToCart} isAddingToCart={isPending} /> ))} </div> ); }

// entities/product/ui/ProductCard_GOOD.tsx ✅ import React from 'react'; import { Product } from '../types'; interface Props { product: Product; // '액션 슬롯' 제공: React 노드를 받음 (IoC) renderActions?: (product: Product) => React.ReactNode; } // ProductCard는 어떤 액션이 들어올지 전혀 모름! export function ProductCard_GOOD({ product, renderActions }: Props) { return ( <div className="product-card"> {/* 상품 정보 표시 */} <img src={product.imageUrl} /> <h3>{product.name}</h3> <p>{product.price}원</p> {/* 액션 영역: 외부에서 주입된 것을 렌더링 */} {renderActions && ( <div className="card-actions"> {renderActions(product)} </div> )} </div> ); } // widgets/product-list/ui/ProductList.tsx ✅ import { ProductCard_GOOD } from '@/entities/product'; import { AddToCartButton } from '@/features/add-to-cart'; // 위젯이 피처를 알고 있음 // import { AddToWishlistButton } from '@/features/add-to-wishlist'; // 필요하면 다른 피처도 가져옴 function ProductList({ products }) { // 위젯은 필요한 피처들을 알고 있고, 어떻게 조합할지 결정 return ( <div> {products.map((product) => ( <ProductCard_GOOD key={product.id} product={product} // 위젯이 엔티티 카드와 피처 버튼을 '조합(Composition)' renderActions={(p) => ( <> <AddToCartButton productId={p.id} /> {/* <AddToWishlistButton productId={p.id} /> */} </> )} /> ))} </div> ); }