[G1-Sync] Manual knowledge update

10_Wiki/Topics/Design & Experience/반응형 윈도우 리사이즈(Resize) 이벤트 처리.md

@@ -1,5 +1,5 @@
 ---
-id: P-REINFORCE-AUTO-DC2EFA
+id: [[P-Reinforce]]-AUTO-DC2EFA
 category: "10_Wiki/💡 Topics/Design & Experience"
 confidence_score: 0.90
 tags: [auto-reinforced]
@@ -13,14 +13,14 @@ github_commit: "[P-Reinforce] Continuous Worker - 반응형 윈도우 리사이
 > 윈도우 창 크기 조절 시 초당 수십 번씩 발생하는 `resize` 이벤트로 인한 UI 렌더링 병목 현상을 방지하기 위해, 디바운싱(Debouncing) 적용 및 이벤트 리스너 해제(Cleanup)를 통해 브라우저 과부하와 메모리 누수를 막는 성능 최적화 기법입니다.
 
 ## 📖 구조화된 지식 (Synthesized Content)
-**1. 리사이즈 이벤트의 성능 병목 현상** 브라우저 창 크기를 조절할 때, 브라우저는 아주 짧은 시간에 수십에서 수백 번의 `resize` 이벤트를 연속적으로 발생시킵니다. 만약 이 이벤트 핸들러 내부에서 React의 상태(State)를 업데이트하거나 무거운 연산을 수행하게 되면, 컴포넌트 트리가 매 틱마다 리렌더링을 시도하여 심각한 프레임 드랍과 브라우저 멈춤 현상(Bottleneck)이 발생합니다.
+**1. 리사이즈 이벤트의 성능 병목 현상** 브라우저 창 크기를 조절할 때, 브라우저는 아주 짧은 시간에 수십에서 수백 번의 `resize` 이벤트를 연속적으로 발생시킵니다. 만약 이 이벤트 핸들러 내부에서 React의 상태([[State]])를 업데이트하거나 무거운 연산을 수행하게 되면, 컴포넌트 트리가 매 틱마다 리렌더링을 시도하여 심각한 프레임 드랍과 브라우저 멈춤 현상(Bottleneck)이 발생합니다.
 
 **2. 스로틀링(Throttling)과 디바운싱(Debouncing) 적용** 과도한 이벤트 실행을 제어하기 위해 핸들러 함수에 디바운싱이나 스로틀링을 적용해야 합니다.
 
 - **디바운스(Debounce):** 사용자가 창 크기 조절을 멈춘 후 일정 시간(예: 200ms)이 지났을 때 마지막에 단 한 번만 리사이즈 로직(상태 업데이트 등)을 처리합니다. 레이아웃 재계산 비용이 큰 경우 가장 적합한 해결책입니다.
 - **스로틀(Throttle):** 창 크기를 조절하는 중에도 실시간으로 부드러운 UI 업데이트가 필요할 때, 이벤트를 일정한 시간 간격(예: 16ms, 약 60FPS)으로만 실행되도록 강제합니다.
 
-**3. 이벤트 리스너 해제와 메모리 누수(Memory Leak) 방지** React 컴포넌트 내부(주로 `useEffect` 훅)에서 `window.addEventListener('resize', handleResize)`를 등록했다면, **반드시 컴포넌트가 화면에서 사라질 때(Unmount) `window.removeEventListener`를 호출하는 클린업(Cleanup) 함수를 반환**해야 합니다. 이 정리 작업을 누락하면 컴포넌트가 파괴된 후에도 숨겨진 백그라운드에서 이벤트가 계속 수신되어, 시간이 지날수록 앱이 느려지고 결국 크래시를 유발하는 심각한 메모리 누수로 이어집니다.
+**3. 이벤트 리스너 해제와 메모리 누수([[memory]] Leak) 방지** React 컴포넌트 내부(주로 `useEffect` 훅)에서 `window.addEventListener('resize', handleResize)`를 등록했다면, **반드시 컴포넌트가 화면에서 사라질 때(Unmount) `window.removeEventListener`를 호출하는 클린업(Cleanup) 함수를 반환**해야 합니다. 이 정리 작업을 누락하면 컴포넌트가 파괴된 후에도 숨겨진 백그라운드에서 이벤트가 계속 수신되어, 시간이 지날수록 앱이 느려지고 결국 크래시를 유발하는 심각한 메모리 누수로 이어집니다.
 
 **4. 외부 지식: ResizeObserver API 활용 (※ 외부 지식 참고)** _이 내용은 제공된 소스 외부의 지식입니다._ 최신 웹 개발에서는 전역 `window` 객체에 `resize` 이벤트를 거는 대신, DOM 요소 자체의 크기 변화만 독립적으로 감지하는 브라우저 내장 API인 `ResizeObserver`를 활용하는 추세입니다. 이를 사용하면 전체 윈도우가 아닌 특정 컴포넌트(예: 반응형 3D 캔버스나 대규모 데이터 그리드 영역)의 크기가 변할 때만 타겟팅하여 반응할 수 있어 성능과 모듈성 면에서 훨씬 효율적입니다.