docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: react-animation-performance
|
||||
title: React 애니메이션 — GPU 가속과 CSS 우선
|
||||
category: Coding
|
||||
status: draft
|
||||
source_trust_level: B
|
||||
verification_status: conceptual
|
||||
created_at: 2026-05-09
|
||||
updated_at: 2026-05-09
|
||||
tags: [react, animation, performance, transform, vibe-coding]
|
||||
tech_stack: { language: "TypeScript / Framer Motion / CSS", applicable_to: ["Web"] }
|
||||
applied_in: []
|
||||
aliases: [transform, will-change, requestAnimationFrame, framer-motion]
|
||||
---
|
||||
|
||||
# React 애니메이션 성능
|
||||
|
||||
> 60fps 의 비밀: **transform / opacity 만 애니메이션**. width / height / top / left 는 layout/paint trigger → jank. JS 로 setState 매 frame 도 안 됨.
|
||||
|
||||
## 📖 핵심 개념
|
||||
- 브라우저 렌더 단계: JS → Style → Layout → Paint → Composite.
|
||||
- transform/opacity 는 Composite 만 쓰는 GPU layer — 다른 단계 skip.
|
||||
- React setState per frame = re-render 60회/초. 컴포넌트 트리에 따라 폭발.
|
||||
|
||||
## 💻 코드 패턴
|
||||
|
||||
### CSS 우선
|
||||
```css
|
||||
.modal {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transition: transform 200ms ease-out, opacity 200ms ease-out;
|
||||
}
|
||||
.modal.open { transform: translateY(0); opacity: 1; }
|
||||
```
|
||||
|
||||
### Framer Motion — declarative
|
||||
```tsx
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
initial={{ y: 100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 100, opacity: 0 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
||||
>
|
||||
...
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
```
|
||||
|
||||
### 직접 ref + transform — React state 우회
|
||||
```tsx
|
||||
function DragBox() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
const onMove = (e: MouseEvent) => {
|
||||
// setState X — DOM 직접
|
||||
if (ref.current) ref.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
|
||||
};
|
||||
window.addEventListener('mousemove', onMove);
|
||||
return () => window.removeEventListener('mousemove', onMove);
|
||||
}, []);
|
||||
return <div ref={ref} />;
|
||||
}
|
||||
```
|
||||
|
||||
### will-change — 신중히
|
||||
```css
|
||||
.about-to-animate { will-change: transform; }
|
||||
/* 애니메이션 끝나면 제거. 영구 두면 메모리 부담 */
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준
|
||||
| 효과 | 도구 |
|
||||
|---|---|
|
||||
| 단순 hover / focus | CSS transition |
|
||||
| 복잡 enter/exit + spring | Framer Motion |
|
||||
| Drag / gesture | react-use-gesture + useSpring 또는 useMotionValue |
|
||||
| Canvas / WebGL | requestAnimationFrame + 별도 라이브러리 (three.js) |
|
||||
| 프레임 단위 React state | ❌ — DOM 직접 또는 motion value |
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **width/height/top/left 애니메이션**: layout thrash. transform: scale / translate 로.
|
||||
- **per-frame setState**: 컴포넌트 트리 재렌더. ref + DOM 직접 또는 motion.
|
||||
- **will-change 영구 적용**: GPU 메모리. 애니메이션 시작 직전 추가, 끝나면 제거.
|
||||
- **거대 list 모두에 transition**: 스크롤 시 60fps 깨짐. visible 영역만.
|
||||
- **가속도 무한**: spring 계산 안 멈춤 → CPU. damping ≥ 10 권장.
|
||||
- **React.memo 없는 자식이 부모 animation state 받음**: 매 frame 재렌더.
|
||||
- **resize observer 안에 무거운 작업**: throttle / debounce.
|
||||
|
||||
## 🤖 LLM 활용 힌트
|
||||
- "transform / opacity 만 애니메이션. layout 속성 금지" 강조.
|
||||
- per-frame 작업은 useRef + DOM 직접.
|
||||
|
||||
## 🔗 관련 문서
|
||||
- [[React_Rendering_Optimization]]
|
||||
- [[React_Refs_Patterns]]
|
||||
Reference in New Issue
Block a user