데브허브 | DEVHUB | React's New Activity Component: Huge Performance Win!React's New Activity Component: Huge Performance Win!
- React의 실험적인
Activity 컴포넌트는 대규모 대시보드와 같은 성능에 민감한 애플리케이션을 위한 중요한 성능 개선책입니다. 🚀
- 기존 DOM 마운트/언마운트 방식은 많은 컴포넌트 토글 시 FPS 저하 및 전체 상태 재설정 문제를 야기하며, 컴포넌트를 다시 추가하는 데 상당한 시간이 소요됩니다. 📉
- CSS를 이용한 숨김 방식은 보이지 않는 컴포넌트까지 항상 렌더링하여 극심한 성능 저하와 UI 응답성 문제를 초래합니다. 👻
Activity 컴포넌트는 컴포넌트가 보이지 않을 때도 가상 DOM(VDOM)에 저우선순위로 렌더링하여, 실제 DOM에 빠르게 추가될 수 있도록 미리 준비합니다. 💡
- 이로 인해 사용자 상호작용의 FPS를 높게 유지하고, 컴포넌트 표시 시간을 획기적으로 단축하며 (예: 480ms에서 188ms로), 토글 시 상태 재설정을 방지합니다. ⏱️
- React는
Activity 컴포넌트 내부 코드의 성능 영향을 지능적으로 평가하여 메인 스레드에 미치는 영향을 최소화합니다. 🧠
unstable_Activity 컴포넌트를 mode="visible" 또는 mode="hidden"으로 사용하며, unstable_ 접두사는 실험적인 기능임을 나타냅니다. 🧪
- 이 기능은 React가 인터페이스의 특정 부분을 선택적으로 렌더링하고 우선순위를 조절하는 능력을 보여주며, 향후 더 다양한 성능 최적화 기능으로 확장될 잠재력을 가집니다. 🔮