1. React 이전 시작하게 된 이유 (수정 중)

기술 부채 + 최적화

현 상황

대시보드가 느리다.

why? 기술 부채: Vue2, node 10

what? 무었 때문에 느리냐?

• Vue2 는 pub-sub 기반 상태 시스템 => destroy 시 모든 리스너들을 클리어 해야 한다
• 최신 기술 스택이 아니다 보니 virtual dom 등 최적화 부재
• VueX 상태 관리

이전 시 장점

1. 속도 향상: 최신 기술이 적용된 빠른 기술 시스템
2. 긍정적인 개발 경험: 시장에서 필요하는 기술 역량 함양
3. 구인이 수월해 진다

Why vue2 component destroy slow?

In Vue 2, the process of destroying components in deeply nested structures might be slower due to several factors. Here are some reasons why this could happen:

Recursion: When destroying a component, Vue 2 recursively destroys all its child components. In a deeply nested structure, the number of child components could be quite large, leading to a performance overhead in the recursive destruction process.

Event listeners and watchers: Each component might have multiple event listeners, watchers, and computed properties. When destroying a component, Vue 2 needs to clean up these resources, and this process can become slower when dealing with a large number of deeply nested components.

Vue 2 reactivity system: Vue 2 uses Object.defineProperty to establish the reactivity system, which has some limitations when dealing with large objects or arrays. When a component is destroyed, Vue needs to remove the reactive bindings for all its data properties. In a deeply nested structure, this could become a performance bottleneck.

DOM manipulation: Destroying a component involves removing its DOM elements. If the component has a large number of DOM elements or complex CSS, the browser might take longer to update the DOM, resulting in slower performance.

To improve the performance of destroying components in deeply nested structures, you can consider the following strategies:

Optimize component structure: Review your component hierarchy and consider flattening it or breaking it into smaller, reusable components.

Lazy loading and code splitting: Implement lazy loading and code splitting to reduce the initial load time and memory usage of your application.

Debounce or throttle updates: In certain scenarios, it might be beneficial to debounce or throttle updates to minimize the frequency of component destruction and re-creation.

Use Vue 3: Migrating to Vue 3 can offer performance improvements, as Vue 3 has an optimized reactivity system based on the Proxy pattern, which can be more efficient when dealing with deeply nested structures.

It's important to remember that performance issues can be caused by various factors, and the specific reasons for slow component destruction in your case might be unique to your implementation. It is recommended to profile your application using performance analysis tools to identify bottlenecks and optimize your code accordingly.