관심사 분리 — Container-Presentational은 죽었는가

function UserProfile({ name, email, avatar, onEdit }) {
  return (
    <div className="profile">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <p>{email}</p>
      <button onClick={onEdit}>수정</button>
    </div>
  );
}

function UserProfileContainer({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then((data) => {
      setUser(data);
      setLoading(false);
    });
  }, [userId]);

  const handleEdit = () => {
    // 수정 로직
  };

  if (loading) return <Spinner />;
  return <UserProfile {...user} onEdit={handleEdit} />;
}

// 커스텀 Hook으로 로직 분리
function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then((data) => {
      setUser(data);
      setLoading(false);
    });
  }, [userId]);

  return { user, loading };
}

// Container 없이 하나의 컴포넌트로
function UserProfile({ userId }) {
  const { user, loading } = useUser(userId);

  if (loading) return <Spinner />;

  return (
    <div className="profile">
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// 데이터 페칭 로직
function useProducts(category) {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    api.getProducts(category)
      .then(setProducts)
      .catch(setError);
  }, [category]);

  return { products, error };
}

// 필터링 로직
function useProductFilter(products) {
  const [filter, setFilter] = useState('');

  const filtered = useMemo(
    () => products.filter((p) => p.name.includes(filter)),
    [products, filter]
  );

  return { filtered, filter, setFilter };
}

// 컴포넌트는 조합만 한다
function ProductList({ category }) {
  const { products, error } = useProducts(category);
  const { filtered, filter, setFilter } = useProductFilter(products);

  if (error) return <ErrorMessage error={error} />;

  return (
    <>
      <SearchInput value={filter} onChange={setFilter} />
      <ProductGrid items={filtered} />
    </>
  );
}

// 순수 UI 컴포넌트 — 여전히 유효
function Button({ variant, size, children, ...props }) {
  return (
    <button className={`btn btn-${variant} btn-${size}`} {...props}>
      {children}
    </button>
  );
}

// 비즈니스 로직이 포함된 컴포넌트
function SubmitOrderButton({ orderId }) {
  const { submit, isSubmitting } = useOrderSubmit(orderId);

  return (
    <Button variant="primary" size="lg" onClick={submit} disabled={isSubmitting}>
      {isSubmitting ? '처리 중...' : '주문하기'}
    </Button>
  );
}

src/
├── components/
│   ├── ProductCard.jsx
│   ├── UserProfile.jsx
│   └── OrderSummary.jsx
├── hooks/
│   ├── useProducts.js
│   ├── useUser.js
│   └── useOrder.js
├── utils/
└── styles/

src/
├── features/
│   ├── products/
│   │   ├── ProductCard.jsx
│   │   ├── ProductList.jsx
│   │   ├── useProducts.js
│   │   ├── productApi.js
│   │   ├── ProductCard.test.jsx
│   │   └── index.js
│   ├── user/
│   │   ├── UserProfile.jsx
│   │   ├── useUser.js
│   │   └── index.js
│   └── order/
│       ├── OrderSummary.jsx
│       ├── useOrder.js
│       └── index.js
├── shared/
│   ├── components/   // Button, Input 등 공유 UI
│   ├── hooks/        // useDebounce 등 범용 훅
│   └── utils/
└── App.jsx

// features/products/index.js
export { ProductCard } from './ProductCard';
export { ProductList } from './ProductList';
export { useProducts } from './useProducts';

// 주의: barrel import는 사용하지 않는 모듈까지 로드할 수 있다
import { ProductCard } from '@/features/products';
// 내부적으로 ProductList, useProducts도 모두 평가될 수 있음

// 직접 경로가 더 안전한 경우
import { ProductCard } from '@/features/products/ProductCard';

src/
├── components/     // 모든 컴포넌트
├── hooks/          // 모든 커스텀 훅
├── pages/          // 라우트 페이지
└── utils/

src/
├── features/       // 비즈니스 기능별
├── shared/         // 공유 컴포넌트, 훅
├── pages/          // 라우트 페이지
└── lib/            // 외부 라이브러리 설정

src/
├── features/       // 비즈니스 도메인별
├── shared/         // 공유 모듈
├── pages/          // 라우트 (feature 조합)
├── lib/            // 외부 서비스 통합
└── app/            // 전역 설정, 프로바이더