프론트엔드 안티패턴 (3) — 컴포넌트 설계: 성급한 추상화가 중복보다 비싼 이유

1. 인라인화 — 각 사용처에 컴포넌트 내용을 복사해 넣는다 (일시적으로 중복 발생)
2. 각 사용처에서 그 자리에 필요 없는 코드를 지운다
3. 남은 것들을 나란히 놓고 본다 — 이제 진짜 공통점이 보인다
4. 진짜 공통점만 다시 추출한다 (보통 처음보다 훨씬 작다)

export default function DashboardPage() {
  // 상태 12개
  const [filters, setFilters] = useState(...);
  const [sort, setSort] = useState(...);
  const [selected, setSelected] = useState(...);
  const [isModalOpen, setModalOpen] = useState(...);
  // ...
 
  // 훅 8개
  const { data: rows } = useQuery(...);
  const { data: summary } = useQuery(...);
  // ...
 
  // 핸들러 15개
  function handleFilterChange() { /* 30줄 */ }
  function handleExport() { /* 50줄 */ }
  // ...
 
  // 렌더 400줄
  return <div>{/* ... */}</div>;
}

function useDashboardFilters() {
  // 필터 관련 상태와 핸들러만
  return { filters, setFilter, resetFilters };
}
function useRowSelection(rows: Row[]) {
  return { selected, toggle, selectAll, clear };
}

return (
  <PageLayout>
    <DashboardHeader onExport={handleExport} />
    <FilterBar filters={filters} onChange={setFilter} />
    <SummaryCards data={summary} />
    <DataTable rows={rows} selection={selection} />
  </PageLayout>
);

function OrderTable({ orders }: { orders: Order[] }) {
  const [filter, setFilter] = useState('');
 
  // 🔴 매 렌더마다 새로 정의된다
  function Row({ order }: { order: Order }) {
    const [memo, setMemo] = useState('');
    return (
      <tr>
        <td>{order.id}</td>
        <td><input value={memo} onChange={e => setMemo(e.target.value)} /></td>
      </tr>
    );
  }
 
  return (
    <>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <table><tbody>
        {orders.map(o => <Row key={o.id} order={o} />)}
      </tbody></table>
    </>
  );
}

// 렌더 1회차
<Row key="1" />   // type: function Row(...) — 참조 A
 
// 렌더 2회차 (filter에 한 글자 입력)
<Row key="1" />   // type: function Row(...) — 참조 B (새 함수!)

// 바깥으로 꺼낸다 — 참조가 안정적이다
function Row({ order }: { order: Order }) { /* ... */ }
 
function OrderTable({ orders }: { orders: Order[] }) { /* ... */ }

function Page() {
  // 🔴 렌더마다 새 styled 컴포넌트 생성 (클래스도 매번 새로 만들어짐)
  const Wrapper = styled.div`padding: 16px;`;
 
  // 🔴 렌더마다 새 HOC 적용
  const Enhanced = withAuth(SomeComponent);
 
  // 🔴 렌더마다 새 memo 래퍼 — memo가 아무 효과 없음
  const Memoized = React.memo(Child);
 
  // 🔴 렌더마다 새 lazy 컴포넌트 — 매번 다시 로딩
  const Lazy = React.lazy(() => import('./Heavy'));
}

// 함수가 아니라 "엘리먼트"를 만드는 건 문제없다
const header = <Header title={title} />;
 
// 렌더 프롭도 문제없다 — 컴포넌트 타입이 아니라 호출되는 함수다
<List renderItem={(item) => <Row item={item} />} />

{todos.map((todo, i) => (
  <TodoItem key={i} todo={todo} />   // 🔴
))}

이전: [A(key=0), B(key=1), C(key=2)]
이후: [Z(key=0), A(key=1), B(key=2), C(key=3)]

// 데이터를 받을 때 한 번 부여한다
const withIds = useMemo(
  () => rawItems.map(item => ({ ...item, _key: crypto.randomUUID() })),
  [rawItems]
);

{isLoading ? <Spinner /> : error ? <Error /> : data?.length ? (
  isAdmin ? (
    isEditMode ? <AdminEditTable data={data} /> : <AdminTable data={data} />
  ) : <Table data={data} />
) : <Empty />}

function OrderList({ ... }) {
  if (isLoading) return <Spinner />;
  if (error) return <ErrorView error={error} />;
  if (!data?.length) return <Empty />;
  if (!isAdmin) return <Table data={data} />;
  return isEditMode ? <AdminEditTable data={data} /> : <AdminTable data={data} />;
}

{isAdmin ? <AdminOrderList data={data} /> : <OrderList data={data} />}

<Button primary secondary large small outlined ghost disabled loading fullWidth rounded />

// 상호배타적인 것은 유니온으로
type ButtonProps = {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  state?: 'idle' | 'loading' | 'disabled';
  fullWidth?: boolean;   // 이건 정말 독립적이므로 boolean이 맞다
};

// 안티패턴
<Table renderHeader={...} renderRow={...} renderFooter={...} renderEmpty={...} />
 
// 합성으로
<Table>
  <Table.Header>...</Table.Header>
  <Table.Body>...</Table.Body>
  <Table.Empty>결과 없음</Table.Empty>
</Table>

// 🔴 매 렌더 새 참조 → memo가 무력화된다
<Chart options={{ responsive: true, legend: { position: 'top' } }} />
<List items={rows.filter(r => r.active)} />
<Button style={{ marginTop: 8 }} />

// 모듈 스코프로 올리거나 (상수라면)
const CHART_OPTIONS = { responsive: true, legend: { position: 'top' } } as const;
 
// useMemo로 (계산이 필요하면)
const activeRows = useMemo(() => rows.filter(r => r.active), [rows]);

// 한 곳에서만 쓰는데 이렇게 만든다
type GenericDataDisplayProps<T, K extends keyof T> = {
  items: T[];
  keyExtractor: (item: T) => string;
  renderItem: (item: T, index: number) => ReactNode;
  emptyState?: ReactNode;
  loadingState?: ReactNode;
  errorState?: (error: Error) => ReactNode;
  onItemClick?: (item: T, index: number) => void;
  // ...
};