[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
+169
-91
@@ -2,117 +2,195 @@
|
||||
id: wiki-2026-0508-jsx
|
||||
title: JSX
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [JavaScript XML, React JSX, TSX]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.95
|
||||
verification_status: applied
|
||||
tags: [jsx, react, typescript, transpilation]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: typescript
|
||||
framework: react
|
||||
---
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
JSX는 UI를 상태(state)와 속성(props)의 순수 함수로 표현하는 선언형(declarative) 컴포넌트 트리 작성 문법이다. HTML과 유사한 구문을 통해 UI 구조를 직관적으로 설계할 수 있게 하며, React Compiler와 같은 현대적인 도구들을 통해 고성능 렌더링 최적화를 자동으로 수행한다.
|
||||
# JSX
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
1. **선언적 컴포넌트 합성 (Composition)**
|
||||
- UI를 독립적인 엘리먼트들의 트리 구조로 사고하고 조립하도록 유도하여 코드의 예측 가능성을 높인다.
|
||||
- JSX 자체는 비즈니스 로직의 위치를 강제하지 않으므로, 아키텍처적 제약(FSD 등)을 통해 로직 누수를 방지해야 한다.
|
||||
2. **모던 빌드 시스템과 JSX 컴파일**
|
||||
- Vite 환경에서는 esbuild 또는 SWC(Rust 기반)를 활용하여 대규모 프로젝트에서도 실시간에 가까운 컴파일 속도를 제공한다.
|
||||
- `@vitejs/plugin-react-swc` 적용 시 HMR(Hot Module Replacement) 성능이 극대화된다.
|
||||
3. **React Compiler를 통한 자동 최적화**
|
||||
- 기존의 수동 메모이제이션(useMemo 등) 한계를 극복하기 위해, 빌드 타임에 JSX 내의 개별 엘리먼트 단위로 독립적이고 정밀한 캐싱을 수행한다.
|
||||
4. **인라인 함수 사용 시 주의점**
|
||||
- JSX 내부에서 익명 함수를 직접 정의하는 행위는 매 렌더링마다 새로운 참조를 생성하여 자식 컴포넌트의 불필요한 리렌더링을 유발하므로 지양해야 한다.
|
||||
## 매 한 줄
|
||||
> **"매 syntactic sugar over `createElement` — XML-like JS expression"**. React 의 발명, 매 declarative UI 의 핵심. 매 `<div>x</div>` → `jsx('div', null, 'x')` 로 transpile. 2026 default 는 **automatic runtime** (`react/jsx-runtime`) — 매 `import React` 의 불필요.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **로직 혼재의 위험**: JSX의 자유로운 특성으로 인해 UI 마크업 사이에 복잡한 비즈니스 규칙이 섞여 컴포넌트가 비대해지고 유지보수가 어려워질 수 있다.
|
||||
- **도구 의존성**: React Compiler와 같은 자동 최적화 도구는 'Rules of React'(순수성 등)를 엄격히 준수하는 코드에서만 안전하게 작동하므로, 기존 레거시 코드와의 호환성 검토가 필요하다.
|
||||
- **추상화 비용**: JSX 성능을 위해 모든 함수를 useCallback으로 감싸는 수동 최적화는 코드의 가독성을 해치고 관리 비용을 증가시키는 트레이드오프가 있다.
|
||||
## 매 핵심
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
### Related Concepts (Auto-Linked)
|
||||
* [[Feature-Sliced_Design]]
|
||||
* [[React]]
|
||||
* [[React_Compiler]]
|
||||
* [[Research]]
|
||||
* [[State]]
|
||||
* [[Virtual_DOM]]
|
||||
### 매 transpile model
|
||||
- **Classic runtime** (legacy): `<div/>` → `React.createElement('div', null)` — 매 file 마다 `import React` 필요.
|
||||
- **Automatic runtime** (2020+, default): `<div/>` → `_jsx('div', null)`, runtime 의 자동 import.
|
||||
- **Preserve**: TS `--jsx preserve` — Babel 등 다른 tool 에 위임.
|
||||
|
||||
### Related Concepts
|
||||
* **Component Trees**: JSX로 조립된 UI의 논리적 구조 (관계: 핵심 데이터 모델)
|
||||
* **React Compiler**: JSX 렌더링 자동 최적화 엔진 (관계: 성능 개선 도구)
|
||||
* **SWC**: 초고속 JSX 컴파일러 (관계: 빌드 타임 인프라)
|
||||
### 매 element types
|
||||
- **Lowercase** (`div`, `span`): 매 string tag, host component.
|
||||
- **Uppercase** (`Foo`): 매 reference, component identifier.
|
||||
- **Member access** (`Lib.Btn`): 매 namespaced component.
|
||||
- **Fragment** (`<>...</>`): 매 wrapper-less group.
|
||||
|
||||
### Deeper Research Questions
|
||||
1. React Compiler가 JSX 내의 개별 태그를 메모이제이션할 때 사용하는 '의존성 분석' 알고리즘의 핵심 원리는 무엇인가?
|
||||
2. JSX 내부 인라인 함수가 성능에 미치는 악영향이 React Compiler 도입 이후에도 여전히 유효한 제약 사항인가?
|
||||
3. Vite + SWC 환경에서 JSX 컴파일 시 발생하는 'Fast Refresh'의 내부 작동 메커니즘은 무엇인가?
|
||||
4. 비즈니스 로직과 JSX 마크업을 물리적으로 완전히 분리하기 위한 'View-Model' 패턴의 프론트엔드적 해석은?
|
||||
5. JSX에서 'Fragment'와 'Wrapper Div'가 렌더링 성능 및 DOM 트리 깊이에 미치는 실질적인 차이는?
|
||||
### 매 응용
|
||||
1. React / Preact / Solid / Qwik 의 매 component definition.
|
||||
2. MDX — Markdown + JSX.
|
||||
3. JSX as data (Astro, hyperscript variant).
|
||||
|
||||
### Practical Application Contexts
|
||||
* **렌더링 최적화**: JSX 내 이벤트 핸들러를 밖으로 분리하여 참조 안정성 확보.
|
||||
* **빌드 속도 개선**: Vite 설정에서 SWC 플러그인을 도입하여 로컬 개발 환경의 핫 리로딩 속도 개선.
|
||||
## 💻 패턴
|
||||
|
||||
### Adjacent Topics
|
||||
* **Memoization (useMemo, useCallback)**
|
||||
* **Feature-Sliced Design (FSD)**
|
||||
* **Virtual DOM vs Incremental DOM**
|
||||
### Automatic runtime (2026 default)
|
||||
```tsx
|
||||
// tsconfig.json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx", // 매 automatic runtime
|
||||
"jsxImportSource": "react" // or "preact", "@emotion/react"
|
||||
}
|
||||
}
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
// Component.tsx — 매 import React 의 X
|
||||
export function Hello({ name }: { name: string }) {
|
||||
return <h1>Hello, {name}</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Conditional rendering
|
||||
```tsx
|
||||
function Status({ user }: { user?: User }) {
|
||||
if (!user) return null;
|
||||
return (
|
||||
<>
|
||||
{user.isAdmin && <AdminBadge />}
|
||||
{user.posts.length > 0
|
||||
? <PostList posts={user.posts} />
|
||||
: <EmptyState />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Children pattern
|
||||
```tsx
|
||||
type Props = { title: string; children: React.ReactNode };
|
||||
function Card({ title, children }: Props) {
|
||||
return (
|
||||
<section className="card">
|
||||
<h2>{title}</h2>
|
||||
<div className="body">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Render prop / function-as-children
|
||||
```tsx
|
||||
type DataLoaderProps<T> = {
|
||||
url: string;
|
||||
children: (data: T | undefined, loading: boolean) => React.ReactNode;
|
||||
};
|
||||
function DataLoader<T>({ url, children }: DataLoaderProps<T>) {
|
||||
const [data, setData] = useState<T>();
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
fetch(url).then(r => r.json()).then(d => { setData(d); setLoading(false); });
|
||||
}, [url]);
|
||||
return <>{children(data, loading)}</>;
|
||||
}
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### Polymorphic component (`as` prop)
|
||||
```tsx
|
||||
type AsProp<C extends React.ElementType> = { as?: C };
|
||||
type PolymorphicProps<C extends React.ElementType> =
|
||||
AsProp<C> & React.ComponentPropsWithoutRef<C>;
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
function Box<C extends React.ElementType = 'div'>({
|
||||
as, ...rest
|
||||
}: PolymorphicProps<C>) {
|
||||
const Comp = as ?? 'div';
|
||||
return <Comp {...rest} />;
|
||||
}
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
<Box as="a" href="/x" /> // 매 anchor props 의 typed
|
||||
<Box as={MyButton} onClick={...} />
|
||||
```
|
||||
|
||||
### JSX spread + override
|
||||
```tsx
|
||||
function PrimaryButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
|
||||
return <button {...props} className={`btn-primary ${props.className ?? ''}`} />;
|
||||
}
|
||||
```
|
||||
|
||||
### Fragment + key
|
||||
```tsx
|
||||
function List({ items }: { items: Item[] }) {
|
||||
return (
|
||||
<dl>
|
||||
{items.map(it => (
|
||||
<React.Fragment key={it.id}>
|
||||
<dt>{it.term}</dt>
|
||||
<dd>{it.def}</dd>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### TypeScript — JSX.IntrinsicElements override
|
||||
```tsx
|
||||
declare global {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'my-web-component': React.DetailedHTMLProps<
|
||||
React.HTMLAttributes<HTMLElement> & { value?: string },
|
||||
HTMLElement
|
||||
>;
|
||||
}
|
||||
}
|
||||
}
|
||||
<my-web-component value="x" />
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| 새 React project | `"jsx": "react-jsx"` (automatic) |
|
||||
| Preact / Solid | `jsxImportSource` 적절 설정 |
|
||||
| Babel 사용 | `"jsx": "preserve"` + babel preset |
|
||||
| Web component 통합 | `JSX.IntrinsicElements` 확장 |
|
||||
| 매 server component | `"jsx": "react-jsx"` (RSC 호환) |
|
||||
|
||||
**기본값**: automatic runtime + TypeScript strict.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[React]] · [[TypeScript]]
|
||||
- 변형: [[TSX]] · [[MDX]] · [[Vue-Template]]
|
||||
- 응용: [[React-Components]] · [[Polymorphic-Components]]
|
||||
- Adjacent: [[Babel]] · [[SWC]] · [[esbuild]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: React/Preact/Solid component 작성, TS JSX 설정 디버깅, polymorphic API 설계.
|
||||
**언제 X**: 매 plain HTML template (no transpile needed), 매 Vue SFC (`<template>` 별 syntax).
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`React` import 누락 (classic runtime)**: 매 `react-jsx` 로 migrate.
|
||||
- **lowercase component name**: `<myButton/>` 매 host element 로 처리됨 — 매 PascalCase 강제.
|
||||
- **`key` 누락 in list**: reconciliation 비용 폭증.
|
||||
- **inline function child 의 남발**: render 마다 새 reference — memoized child re-render 유발.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (react.dev JSX docs, TS Handbook JSX, React 19 RC notes).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — JSX automatic runtime + polymorphic patterns 정리 |
|
||||
|
||||
Reference in New Issue
Block a user