전부터 SPA 프레임웍들을 많이 써오다가 최근 Vue 로 무거운 페이지를 작업하게 되면서 무언가 퍼포먼스에 대한 갈증이 많이 느껴지게 되었다. 이 때문에 문득 각 프레임워크별로 퍼포먼스가 궁금해져서 찾아보게 되었다.

더 많은 비교대상이 있지만 일단 우리가 많이 쓰는 그리고 이제 막 뜨고있는 라이브러리들만 콕 찝어서 비교해보니 앞으로 새로 시작할 프로젝트에서는 무얼 쓰는게 좋을지에 대한 생각이 깊어진다.

React - 전통적인 virtual DOM 을 사용하는 강자이면서 가장 인기있는 라이브러리라고 봐도 손색이 없다. 다양한 서드파티들이 존재하고 손쉽게 NPM에서 라이브러리들을 구할 수 있다. 경험상 잘만 쓰면 정말 좋은 구조. 하지만 잘못쓰면 한없이 복잡해질수도..

Vue - React 에서 virtual DOM 의 장점을 따오고 SFC(single file component) 형태로 정돈된 형태로 작업할 수 있도록 만든 프레임웍이다. 다만 개인적으로는 작년부터 약 2년간 작업을 해오면서 상당한 불만사항이 쌓여있는 상태(Vue 핵심 멤버인 posva가 너무 맘에 안든다). 특히 vue-router 의 부실한 기능과 자체적으로 걸어버리는 제약들 때문에 상당한 불편을 경험했다. 기존의 React 에서 못느꼈던 많은 불편을 느낀건 대부분 vue-router 덕분.
  SFC 의 경우에도 처음에는 깔끔하고 편리한 구조덕분에 좋은 방식이라고 생각했지만 프로젝트가 복잡해지고 예외상황이 많아질수록 점점 늘어나는 컴포넌트 양을 감당하기가 어려워서 결국 별로라는 결론이 나왔다.
  예를 들면 리스트를 만들어야하는데 이 리스트는 하나하나의 항목이 엄청난 예외상황들을 가지고있고 엄청난 사이즈를 가지고 있어서 별도의 컴포넌트를 구성하게 되고 이를 리스트화 해줄 수 있는 별도 컴포넌트가 필요하다. 또 여기에 추가적으로 이 리스트 조차도 각종 인터페이스를 엮어서 컨트롤해 줄 수 있어야한다고 한다면 이를 랩핑해주는 컴포넌트까지도... 결국 크게보면 기능은 하나인데 이 하나의 기능을 위해 다수의 파일을 만들어야하는 상황인것이다. 이쯤되면 인터페이스단에서 리스트에 추가 삭제등을 할때 필요한 기능들을 vuex에서 관리해서 액션으로 전부 맵핑시키던가 아니면 child의 props로 다단계로 기능을 넘겨야하는데 이러한 패턴이 얼마나 답답한 형태인지 알사람들은 알것이다. vuex를 사용한다쳐도 사용할때마다 일회용으로 쓰는 컴포넌트라면 이걸위해 vuex를 연동해서 사용하는건 store의 복잡도를 상승시키는 요인이 된다. redux 또는 vuex를 여러명의 개발자가 함께 사용해본 사람들이라면 어느정도 경험해봤을것이다. store에 항목이 많아지면 많아질수록 난 모르는 남들이 짜놓은 점점 걷잡을 수 없이 커지는 레거시들...일일히 다 읽어봐야하는거 아니냐고 하는 사람이 있을지는 모르겠는데 이런게 많아질수록 기존코드가 있는지 확인하느라 추가 개발속도가 점점 느려지는건 당연할것이다.
  컴포넌트를 잘게 쪼개서 하나의 파일에서도 여러개의 작은 컴포넌트를 만들어 한 파일에서 하나의 기능집합으로 묶어줄 수 있던 React와는 비교되는 부분이라고 할 수 있다.

Angular 의 경우는 angular.js 시절 이후로 안써봤으니 패스

Svelte - virtual DOM 의 문제점을 지적하고 다른방식으로 해결한 프레임웍. 요즘 뜨겁게 떠오르는 프로젝트인듯하다. virtual DOM 이 느린 상황은 이미 충분히 경험했다. 페이지내에 연산량이 많아질수록 virtual DOM 을 사용해서 생기는 오버헤드가 이뻐보일수가 없다. 그래도 대체 어떻게 이 부분을 대체했는가 보니 선언된 각 변수를 빌드하는 단계에서 React 의 setState 같은 구문을 사용하는것으로 아예 치환시켜버린다. 곰곰히 생각해보면 특정 부분이 변할때 특정 부분에 바뀐 DOM을 넣어주기만 하면 사실 페이지가 구성되는데 문제가 없다. React 에서 virtual DOM 만 빼버린것이다!
  이처럼 아예 동작구성 자체를 새로운 코드로 변경시켜버리기에 빌드한다고 표현하지 않고 컴파일한다는 표현을 사용한다. 결국 Vue 에서 v-model 을 사용하는 편리함을 주면서도 별도의 오버헤드를 줄이는 아이디어가 svelte의 핵심이다. 요즘 핫한듯하다. 하지만....
  Svelte 는 SFC(single file component) 만을 지원한다. 이 이야기인 즉 Vue 에서 느꼈던 그 불만사항을 그대로 계승한다는 이야기이다. 일관성을 유지하기 위해서라고는 하지만 이미 많은 개발자들이 경험한 불편을 무시해버리는게 Svelte 인것이다. 개인적으로 이 토론을 보고 Svelte를 별로 좋게보지 않는다.(https://github.com/sveltejs/svelte/issues/2940) 여기서 Solid 의 존재를 알게됬으니...

Solid - Svelte의 장점인 virtual DOM 을 과감하게 버리면서도 React 의 사용성을 그대로 계승했다. virtual DOM 방식을 버린 React 라고 보아도 무방할 것 같다. 단점이라면 약간 부실해보이는 Document, 아직까진 낮은 인지도, React 와 거의 동일한 수준의 러닝커브, 관련 라이브러리가 적은문제 등... 아직은 갈길이 멀다. 하지만 React 에서 virtual DOM 문제만 제외하면 완벽하겠는데라는 부분을 이 라이브러리가 매꾸고 있으니 앞으로 발전 가능성이 높지 않을까? 심지어... 현재로서만 봐도 성능도 가장 좋다. 발전이 기대되는 라이브러리

해당 퍼포먼스 비교 테스트는 다음 페이지에서 확인할 수 있습니다.

https://krausest.github.io/js-framework-benchmark/current.html

아래는 퍼포먼스를 추려서 캡쳐한 이미지(번역돌림 / 원문은 아래쪽에)

퍼포먼스를 추려서 캡쳐한 이미지 원문