React 이후의 웹 프레임워크들

흔히 가장 많이 사용되는 프론트엔드 개발 프레임워크는 React, Vue, Angular이다.

그중에서도, 이젠 React가 Next.js를 필두로 가장 많이 사용되는 웹 프론트엔드 개발 프레임워크로 자리잡았다.

https://npmtrends.com/angular-vs-react-vs-vue

angular vs react vs vue | npm trends

Github stars 숫자도 Vue, Angular에 비해서 압도적인 React는 앞으로도 계속 압도적인 지위를 유지할 수 있을까?

하지만 웹 프론트엔드 개발 생태계는 계속해서 더 나은 프레임워크를 위해서 수많은 시도가 있는 것 같다.

따라서, 어설프나마 React 이후에 등장한 프론트엔드 프레임워크들에 대해서 간단하게나마 알아보고 기록하고자 하였다.

미래에 React를 위협할 프레임워크가 이중에 있을지도 모르니 말이다.

 

Svelte

https://svelte.dev/

Svelte • Cybernetically enhanced web apps

아마 리액트, 뷰, 앵귤러를 제외하면 가장 유명한 라이브러리, 스벨트이다.

스벨트 킷이라는 웹 프레임워크를 가지고 있고 많은 프론트엔드 개발자들이 좋아하고 기대하는 라이브러리이다.

 

스벨트는대표적으로 세 가지 장점을 지닌다.

• Write less code - 코드량이 적고 html, css, js와 같은 기존의 프론트엔드 도구만을 사용한다.
• No virtual DOM - 가상 돔을 사용하지 않고, 스벨트의 코드가 프레임워크가 없는 바닐라 자바스크립트 코드로 컴파일 된다. 때문에 빠른 속도를 자랑한다.
• Truly reactive - 스벨트가 자체적으로 자바스크립트에 반응성을 제공하기에, 상태관리 라이브러리가 필요하지 않다.

Preact

https://preactjs.com/

Preact

Preact는 React와 동일한 API를 가지지만, 훨씬 가벼운 크기를 자랑하는 React의 대체제로 시작한 프레임워크다.

때문에 기존의 React 개발자들은 큰 어려움 없이 Preact를 사용할 수 있다.

공식문서에 React 프로젝트를 Preact로 바꾸는 방법을 소개하기도 한다.

다만, 상태를 관리하는 새로운 방법인 Signals를 제공하여 React와는 차별되는 새로운 기능을 제공한다.

 

Preact를 사용하면, 다음과 같은 장점들이 있다.

• Closer to the DOM - Preact는 얇은 가상 돔을 사용한다. 다만, Preact 코드는 변환 단계 없이 브라우저에서 실행될 수 있다.
• Small Size - 작은 크기(3kB) 덕분에 빠르고, 구문 분석에 들어가는 시간이 짧아 사용자에게 화면을 빠르게 제공할 수 있다.
• Big Performance - batch 업데이트가 자동으로 일어나고 예측 가능한 diff의 구현으로 높은 성능이 구현되었다.
• Portable & Embeddable - Preact의 작은 용량 덕분에 프로젝트의 일부분에 이식되어 사용될 수 있다.
• Instantly Productive - 경량화 되었지만, 여전히 높은 생산성을 제공한다.
• Ecosystem Compatible - React 생태계의 컴포넌트들을 사용할 수 있으며, preact/compat를 통해서 보다 복잡한 리액트 호환성도 제공된다.

Lit

https://lit.dev/

Lit

Lit은 클래스 문법을 기반으로 하는 간단하고 빠른 웹 컴포넌트 라이브러리이다.

어노테이션을 사용하여 클래스 형태의 customElement를 만들고, 클래스 내부에 스타일과 변수 상태값을 가진다.

클래스 내부에서 render 함수를 사용하여 html을 렌더링 할 수 있다.

google developer에서 React 사용자를 위한 Lit 튜토리얼을 제공한다.

 

Lit은 다음과 같은 장점들을 지닌다.

• boilerplate 없이 개발이 가능하기에 간단하다.
• 용량이 작고(5 KB), UI에서 업데이트가 필요한 부분에만 수정이 일어나 즉각적으로 업데이트가 된다. (가상 트리 빌드 및 DOM 비교 X)
• 웹 컴포넌트는 HTML을 사용하는 곳 어디에서든 작동하기에, 유지관리에 유용하다.

SolidJS

https://www.solidjs.com/

https://www.solidjs.com/

SolidJs는 JSX 문법을 지원하며 단방향 데이터 흐름을 따르기에 React와 유사하다.

그리고 Preact에서 사용된 Signals의 원조격으로 Signal을 사용할 수 있다.

Signal은 useState와 유사하게 값과 set함수로 이루어져 읽기와 쓰기가 분리되어있는 등 리액트와 유사한 점이 많다.

하지만, 가장 큰 차이점으로 SolidJs는 가상돔 없이 이들이 구현되어있다.

 

SolidJS의 장점을 요약하자면, 다음과 같다.

• UI 속도 및 메모리 사용 벤치마크에서 높은 성능을 보여준다.
• JSX 문법으로 유연하게 프로그래밍이 가능하며, 반응형 프로그래밍이 가능하도록 설계되었다.
• Fragments, Portals, Context, Suspense, Lazy Components, SSR & Hydration과 같이 프론트엔드 개발자에게 익숙한 기능들을 제공한다.

Alpine.js

https://alpinejs.dev/

Alpine.js

Alpine.js는 공식문서에서 소개하길, 현대 web을 위한 jQuery라고 한다.

각 요소의 태그에 인라인으로 지정된 속성 값을 주어 상태값이나 이벤트를 handle한다.

Alpine은 15개의 attributes 6개의 properties, 그리고 2개의 methods로 구성되어 쉽게 배우고 사용할 수 있다.

• Alpaine.js는 간단하며 가볍고, 별다른 빌드과정도 필요없기에 다른 프레임워크와도 함께 사용될 수 있다.

🥬 마무리

이 라이브러리들 중 가장 많은 다운로드 수를 기록하는 것은 preact이다.

아무래도 기존 react에서 파생된 프레임워크다보니, 접근성이 좋은 것 같다.

가장 의외인 점은 Svelte가 가장 많은 깃허브 start 수를 가지고 있고, 인기도 많지만 실제로 다운로드되는 숫자는 생각보다 낮았다.

오히려 lit-element가 더 많은 다운로드 수를 보여주고 있었다.

 

https://npmtrends.com/alpinejs-vs-lit-html-vs-preact-vs-solid-js-vs-svelte

alpinejs vs lit-html vs preact vs solid-js vs svelte | npm trends

 

당연히 위의 모든 웹 프레임워크를 합쳐도 React 보다 한참 덜 사용되고 있다.

하지만, 각자 장점과 개선점을 가지고 유지보수가 계속 되고 있는 위의 라이브러리들이 언젠가 React 보다 더 높은 생산성과 빠른 속도를 바탕으로 느슨해진 프론트엔드 개발 생태계에 파문을 일으킬 날이 오지 않을까 하는 기대를 해보았다.