[잡담] Front-end FrameWork 동향에 대한 고찰

내가 꼽은 삼대장

오늘 우리회사 대표님이 스벨트 점유율이 올라간다며 새로 시작하는 프로젝트 중에 사용할 수 있는 곳이 있으면 한번 도입을 해볼까? 이런 얘기를 하시더라. 그런 김에 안그래도 관심이 좀 있기도 했었어서 오늘은 간단히 최근 Front-end FrameWork 동향에 대해서 한번 이야기 해보고자 하는데, 지금 막 Front-end 개발을 시작하는 개발자들도 한번 생각해볼 수 있는 시간이 되었으면 좋겠다. 

일단 최근 프론트엔드 프레임워크 동향에 대해서 한눈에 확인할 수 있는 사이트를 하나 링크를 걸어두겠다. 

https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/

State of JavaScript 2022: Front-end Frameworks

1. 최근 Front-end 동향

뭐 원래 프론트 엔드라는 영역이 트렌드가 엄청 급격하게 바뀌는 영역이다보니, 프론트 엔드 개발자라면 동향에 대해서도 조금 관심을 가지고 자주 들여다보아야할 필요성이 있는데, 지난 몇 년간 자잘하게 바뀌다 요즘 큰 물결이 한번 더 오는 것 같다. 대표적인 문제는 가장 높은 점유율을 자랑하는 React의 번들사이즈가 너무 커져서 오히려 성능저하나 JS 다운로드 면에서 상당히 오래걸리는등 문제를 야기한다는 것인데, 그러다보니 이전에도 계속 시도를 해왔지만 그 커다란 번들 사이즈의 주 원인이 되는 Virtual DOM을 제거하는 방향으로 트렌드가 굳혀져가는 듯하다. 

 

2. 그럼 우리는 이제 어디로 가야하지?

사실 답은 정해져있다. Virtual DOM을 사용하지 않고 실제 DOM을 제어하는 방향으로 프레임워크들이 개발되어 나오고 있는데, 그 대표적인 애들이 Svelte, Preact, SolidJS다. 그래서 솔직히 섣부르긴 하지만 앞서 2015년 React가 출시 된 이후, Front-end FrameWork 삼대장이 Angular, Vue.js, React.js 이렇게 있었던 걸로 생각해봤을 때,  앞으로는 앞서 말한 Svelte, Preact, SolidJS 이 세가지 프레임 워크들을 위주로 Front-end 개발의 방향성이 정해지지 않을까 스리슬쩍 예측해본다. 그럼 간단하게 나마 저 세가지에 대해서 살짝 알아보고 넘어가도록 하자. 

 

1) Svelte

Svelte는 2019년에 나온걸로 아는데 위키에는 2016년이라 정확히 뭐가 맞는진 잘 모르겠다.

주로 대부분의 사람들이 React를 사용하고 있으니 일단 React와 비교하여 설명을 해볼까 한다.

 

React는 기본적으로 단방향 Data Flow를 채택하고 있다. 변수를 사용할 때도 State(상태)로 선언을 해두고, Action이라는 행위를 통해서만 값을 변경할 수 있도록 하는데, 이게 이뤄지려면 Action이 발생하게 하는 함수를 만들고 Event가 발생할때마다 이 함수를 호출해야하기 때문에 코드가 길어지게 한다는 문제점이 있다. 

허나 Svelte의 경우엔 양방향 Data Flow를 활용하고 있다. 이 때문에, React에서 필요로 하는 코드들을 확 줄여서 코드의 길이를 상당히 줄여낼 수 있음. 

또한, JS를 다운로드해서 RunTime 시 해석을 하는 React Application과 다르게 Svelte의 경우 BuildTime에서 Compile을 하면서 Vanila JS로 해석이 이뤄지기 때문에, 이런 부분까지도 속도향상에 기여할 수 있다. 

 

가장 큰 차이점은 React의 대표적인 특징인 Virtual DOM이 없다는 것인데, 이 Virtual DOM이 없어짐에 따라 실제 DOM으로 바로 변경사항을 반영한다는 점에서 한가지 절차가 사라지니 빨라질 수 밖에 없고, 앞서 말했던 React의 커다란 단점이 되는 react-dom에 의한 번들 사이즈 축소까지도 이뤄내 더 성능향상을 실현할 수 있다고 볼 수 있겠다. 

 

문제점이라고 하면 React에 비하면 생태계가 너무 작다보니, 커뮤니티의 활성화가 필요할 것으로 보인다.

 

2) Preact

Preact는 점유율을 보면 이게 왜 이 글에 포함에 되어있을까? 라는 의문이 들거라고 생각하는데, 그냥 단순히 React의 생태계를 받아들이기에 편해서 그렇다고 얘기하고자 한다. 

개발하는 방법, 문법 자체가 React와 거의 동일하고, 그저 Virtual DOM을 사용하지 않는다는 느낌만 주는데, 실제로 hooks를 import하는 방법 같은게 조금 다를 뿐 React와 크게 다르지 않다. state, SetState를 사용하는 것도 동일하고, jsx문법을 사용하고 있으니, 그저 더욱 lite한 React 정도로 느껴진다. 

뭐 물론 최근엔 Signal이라는 것을 소개하면서 React와 조금 다른 행보를 보이고 있긴한데, 그렇다고 해도, React와 구성이 비슷하다는 것 자체가 React의 생태계를 받아들이기 수월할테니 이 녀석도 후보에 올려뒀다. 

 

3) Solid JS

얘는 2021년에 나온 애다. 진짜 역사가 너무 짧아서 Stable할거라는 생각이 안드니, 아무래도 바로 도입에는 걱정이 있긴한데 그래도 내가 주목하고 있는 애긴하다. 얘도 createSignal이라는 문법을 활용해서 상태관리를 한다., React랑 좀 다른게, React는 상태가 변하면 걍 Rerender를 갈겨버리면서, 기존에 있던 데이터를 싹다 날려버리는데, 얘는 그렇지가 않음.

그래서 좀더 기존 데이터의 참조에 유연한 편이라고 보면 되겠다.하지만 또 한편으로는 날리고 새로그리질 않으니까 변경사항 반영 방식이 달라서 React 사용자는 적응이 힘든 것 같기도 함. 얘넨 애초에 Component 자체를 상태에 따라 변하도록 미리 구성해줘야하는 것 같다. 이렇게 할 수 있는 내장 컴포넌트를 제공함. 

또, 컴포넌트를 분해해서 속성을 변수처럼 관리한다던가 이런게 안되고, 상태를 가져올때도 함수를 호출하듯이 가져와야한다는 등 조금 번거로운 경우가 있다. 

 

 

3. 마무리하며

이번에 저 프론트엔드 동향을 보면서 조금 충격을 받긴 했다. 죽어라고 React 공부했는데 뭔가 영원할 것만 같았던 기존 주류 FrameWork들 점유율이 떡락하고 있는걸 보니, 진짜 프론트엔드 개발자는 트렌디해야하는 구나. 라는 생각이 자꾸 들어버림.. 그래도 한편으론 또 새로운 방식의 개발을 해볼 수 있다는 점에서 좀 설레기도 한다. 

또, React가 지배적이었던 프론트엔드 업계를 뒤집기 시작했기도하고, 새로나오는 프레임워크들이 외려 Vanila JS 친화적인 라이브러리들과 더 친화적으로 나오고 있다보니 Vanila JS에 대한 학습도 게을리 할 수 없겠다는 생각이 좀 든다. 

큰 물결이 다가오는데 다른 프론트엔드 개발자들, 프론트엔드 개발자를 꿈꾸고 있는 사람들도 잘 받아들여서 성장하길 기원한다.