2nd/10_Wiki/Topics/Architecture/Fragment-bound.md

---
id: wiki-2026-0508-fragment-bound
title: Fragment-bound
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [React Fragment, Fragment-bound Component, Multi-root Component]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, frontend, jsx, dom]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react
---

# Fragment-bound

## 매 한 줄
> **"매 component 의 root 의 wrapper div 의 elimination"**. React Fragment (`<>...</>` 또는 `<Fragment>`) 매 component 매 multiple sibling roots 의 return 의 enable — 매 unnecessary `<div>` wrapper 의 avoid. "Fragment-bound" component 매 single DOM root 의 not-have, 매 layout (Grid, Table, Flex) 매 fragile 의 implication 의 carry.

## 매 핵심

### 매 Why Fragment
- **DOM cleanliness**: 매 wrapper div 의 CSS Grid/Flex 의 break — 매 child 매 grid item 의 directly 의 must be.
- **No semantic noise**: 매 `<table>` 매 `<tr>` 매 `<td>` 의 nest 의 wrapper div 의 invalid HTML.
- **Performance (marginal)**: 매 fewer DOM nodes — 매 hot lists 의 measurable.

### 매 Forms
- `<></>` — short syntax, 매 no key/props.
- `<Fragment key={...}>` — 매 list iteration 매 key 의 needed 시.
- `<React.Fragment>` — explicit import, 매 build tooling 의 short syntax 의 not-support 시.

### 매 Fragment-bound implications
- 매 ref 의 attach 의 not-possible (매 single DOM node 의 not-have).
- 매 parent 매 child layout 의 control 의 must — 매 child 매 own root 의 not-have.
- 매 portals 매 separate concern.

### 매 응용
1. Table rows / cells (`<TableRow>` returning `<td>...</td><td>...</td>`).
2. Grid items in CSS Grid layout.
3. Component library — wrapper-less primitives.
4. Conditional sibling rendering.

## 💻 패턴

### Basic Fragment
```tsx
function Greeting() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}
// 매 DOM 의 <h1>+<p> 의 sibling, 매 no wrapper
```

### Fragment with key (list)
```tsx
import { Fragment } from 'react';

function Glossary({ items }: { items: { term: string; def: string }[] }) {
  return (
    <dl>
      {items.map(it => (
        <Fragment key={it.term}>
          <dt>{it.term}</dt>
          <dd>{it.def}</dd>
        </Fragment>
      ))}
    </dl>
  );
}
// 매 short syntax 매 key prop 의 not-accept — 매 explicit Fragment 의 use
```

### Table row composition
```tsx
function ProductRow({ product }: { product: Product }) {
  return (
    <>
      <td>{product.name}</td>
      <td>{product.price}</td>
      <td>{product.stock}</td>
    </>
  );
}

function ProductTable({ products }: { products: Product[] }) {
  return (
    <table>
      <tbody>
        {products.map(p => (
          <tr key={p.id}><ProductRow product={p} /></tr>
        ))}
      </tbody>
    </table>
  );
}
// 매 wrapper div 매 tr 안 의 invalid HTML — 매 Fragment 의 only correct
```

### CSS Grid items
```tsx
function GridGroup() {
  return (
    <>
      <div className="grid-item">A</div>
      <div className="grid-item">B</div>
      <div className="grid-item">C</div>
    </>
  );
}

function Layout() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
      <GridGroup /> {/* 매 3 children 의 grid items 의 directly */}
    </div>
  );
}
// 매 wrapper div 의 add 시 매 single grid cell 의 collapse
```

### Conditional sibling rendering
```tsx
function Notification({ user }: { user?: User }) {
  if (!user) return null;
  return (
    <>
      {user.unreadCount > 0 && (
        <span className="badge">{user.unreadCount}</span>
      )}
      <span className="name">{user.name}</span>
    </>
  );
}
```

### Ref forwarding 매 NOT possible
```tsx
// 매 X — Fragment 매 ref 의 not-attach 의
const Bad = forwardRef<HTMLDivElement>((props, ref) => (
  <>
    <h1 ref={ref}>Title</h1>  {/* 매 child element 의 ref 의 forward 의 must */}
    <p>Body</p>
  </>
));

// 매 O — 매 explicit child 의 ref 의 forward
const Card = forwardRef<HTMLHeadingElement, { title: string; body: string }>(
  ({ title, body }, ref) => (
    <>
      <h1 ref={ref}>{title}</h1>
      <p>{body}</p>
    </>
  ),
);
```

### Suspense / ErrorBoundary 매 Fragment children
```tsx
function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <>
        <Header />
        <Main />
        <Footer />
      </>
    </Suspense>
  );
}
// 매 Suspense 매 single child 의 not-require — 매 Fragment 의 N children 의 all 의 wait
```

### Slot pattern 의 fragment-aware
```tsx
type SlotProps = { children: ReactNode };
function Slot({ children }: SlotProps) {
  // 매 children 매 Fragment 매 single 매 multiple 매 unwrap 의 logic
  if (isValidElement(children) && children.type === Fragment) {
    return <>{children.props.children}</>;
  }
  return <>{children}</>;
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Component 매 단일 root 의 natural | 매 `<div>` 의 use |
| Wrapper div 매 layout 의 break | 매 Fragment |
| Table / dl / select children | 매 Fragment 의 mandatory |
| List item with multiple roots | 매 Fragment with key |
| Ref / styling 의 root needed | 매 div / specific element 의 use |

**기본값**: 매 wrapper 매 semantic value 의 carry 의 div, 매 그렇지 않으면 매 Fragment.

## 🔗 Graph
- 부모: [[React]] · [[JSX]]
- 변형: [[Slot-Pattern]]
- 응용: [[CSS Grid]] · [[Component-Composition]]

## 🤖 LLM 활용
**언제**: 매 multi-root component. Table/Grid layout 의 wrapper 의 break 의 시. List item 매 multiple sibling 의 render.
**언제 X**: 매 single root + ref/styling needed — 매 div 의 use. Wrapper 의 styling target 의 expected 시.

## ❌ 안티패턴
- **Wrapper div habit**: 매 모든 component 매 `<div>` 의 wrap — 매 div soup, 매 layout 의 fragile.
- **Fragment without key in list**: 매 `<>` 매 `.map` 안 의 use — 매 React warning + reconciliation 의 broken.
- **Trying to ref a Fragment**: 매 Fragment 의 DOM node 의 not-have — 매 forwardRef 의 specific child 의 forward 의 must.
- **Fragment inside single-child API**: 매 some libs (older) 매 single child 의 expect — 매 Fragment 의 expand, 매 break.

## 🧪 검증 / 중복
- Verified (React docs "Fragments"; React 16.2 release notes).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Fragment patterns + table/grid/key examples |