위 글은 Medium의 Microsoft is ditching React 글을 번역한 글입니다.
최근 마이크로소프트 엣지 팀은 엣지 브라우저의 성능을 개선하기 위해 React 사용을 중단하기로 결정한 내용을 담은 기사를 작성했습니다. 이 기사에서는 마이크로소프트의 결정이 React와 JavaScript 개발자들에게 어떤 영향을 미칠지, 그리고 엣지 팀의 진정한 의도가 무엇인지 자세히 설명합니다.
배경
마이크로소프트 엣지는 구글의 오픈 소스 웹 브라우저 프로젝트인 Chromium을 기반으로 만들어졌습니다. 엣지의 기본 UI는 Chromium에서 유래했지만, 마이크로소프트는 엣지를 Chrome과 다르게 보이게 하기 위해 자체적으로 설계된 UI 컴포넌트들을 사용했습니다. 이 컴포넌트들은 대부분 React를 사용해 만들어졌습니다.
엣지 브라우저는 완전한 React 애플리케이션이 아닙니다. 대신 HTML 페이지와 React를 결합하여 여러 컴포넌트를 사용합니다. 메뉴, 드롭다운, 즐겨찾기 탭과 같은 작은 컴포넌트들이 React 앱으로 구성되어 있습니다.
그러나 이러한 접근 방식은 비효율적입니다. 특히 UI 데이터가 동적으로 변경되지 않는 경우에는 더욱 그렇습니다. 이러한 비효율성은 마이크로소프트가 React 사용에 대해 의문을 가지게 만들었습니다.
문제점
https://youtu.be/avJmgfGpoJA?si=jWljLDcl_3kaneKD
마이크로소프트는 React가 비효율적이라고 주장하며, 2024년 5월 28일에 발표된 기사에서 이를 개선하기 위한 방안을 설명했습니다.
- 코드 번들의 크기 문제: 여러 컴포넌트 간에 공유된 코드 번들이 너무 커서 브라우저 속도를 저하시켰습니다. 다양한 팀이 동일한 번들을 공유하면서 불필요한 것들을 함께 공유하여 UI의 한 부분이 다른 부분을 느리게 만드는 상황이 발생했습니다.
- 클라이언트 측 렌더링: 마이크로소프트는 JavaScript를 사용해 클라이언트 측에서 UI를 렌더링하는 프레임워크를 사용했으며, 이것이 브라우저를 느리게 만든 또 다른 이유라고 주장했습니다. 엣지는 여러 React 애플리케이션을 공유했습니다. 여러 React 프로젝트를 시작한 것이 아니라, 다양한 위치에 단일 JavaScript 번들을 사용하고 여러 컴포넌트에 이 번들을 탑재했습니다.
해결책
마이크로소프트는 문제가 React 자체에 있는 것이 아니라, 그들의 구현 방식에 있다고 결론지었습니다. 각 웹페이지는 개별 번들을 사용하고, 특정 페이지의 목적에 맞게 독립적으로 작동해야 합니다. 그러나 여러 팀이 동일한 번들을 공유하면서 혼란이 발생했습니다.
마이크로소프트는 WebUI 2.0이라는 새로운 프레임워크를 발표했습니다. 이 프레임워크는 대형 코드 번들의 문제를 해결하고, 초기화 경로 동안 실행되는 JavaScript의 양을 최소화하는 마크업 우선 아키텍처입니다. 이 새로운 아키텍처를 사용하여 앞서 언급한 두 가지 문제를 해결하고자 합니다.
결국, 마이크로소프트는 React를 잘못 사용한 것이 문제였으며, 이를 해결하기 위해 새로운 프레임워크를 도입하게 되었습니다. 개별 HTML 파일마다 React를 사용하는 방식은 비효율적이었고, 여러 팀이 동일한 JavaScript 코드를 공유하면서 문제가 발생했습니다.
이제 마이크로소프트는 React 사용을 중단하고, 새로운 솔루션을 찾고 있습니다. 이 결정이 개발자들에게 어떤 영향을 미칠지, 그리고 React 커뮤니티와 JavaScript 개발자들에게 어떤 의미가 있는지에 대해 많은 논의가 필요할 것입니다.
결론
마이크로소프트 엣지 팀의 결정은 React와 JavaScript 개발자들에게 중요한 영향을 미칠 수 있습니다. 이 기사는 마이크로소프트의 새로운 접근 방식과 그로 인해 발생하는 변화에 대해 설명하며, 개발자들이 이러한 변화를 이해하고 준비할 수 있도록 도와줍니다.
마이크로소프트가 React 사용을 중단한 이유는 단순히 React의 문제가 아니라, 그들의 구현 방식에 있었습니다. 새로운 프레임워크를 도입함으로써 이러한 문제를 해결하고, 더 나은 성능을 제공하고자 하는 마이크로소프트의 노력이 엿보입니다.
리액트 커뮤니티가 전세계적으로 많은 파이를 차지하고, 크롬 브라우저 사용량이 타 브라우저에 비해 월등한 상황 속에서
MS Edge팀의 React에서 WEB UI 2.0으로의 이전을 통해 인터넷 브라우저 사용자들의 이동이 일어날 지 귀추가 주목됩니다.
