들어가기에 앞서...
개념적 단순화를 위해 React, Vue, Svelte는 프레임워크로, Next.js, Nuxt, SvelteKit 등은 메타 프레임워크로 표현하였습니다.
다들 React만 쓴다
얼마 전에 요즘 프론트엔드 신입 지원자들의 기술스택이 전부 TypeScript + React + Next.js라며 약간의 아쉬움(?)을 내비친 트윗을 봤다. 가장 큰 이유는 "채용 시장에서 원하기 때문"일 것이고 그것보다 중요한 이유는 없을 것 같다.
하지만 여기에서 느낀 아쉬움이 뭔지는 알 것도 같다. 개발자들은 특정 도구를 선택하고 사용하는 데에도 논리가 있기를 바라는 사람들인데, 채용시장에서의 우대라는 이유만으로는 논리가 완성된 느낌이 안 든다. 면접을 보면서 왜 React를 쓰냐고 물어봤는데, 면접자가 그냥 다들 쓰니까~ 라고 한다면 아쉬울 수 밖에.
그럼 정말 다들 쓰는지, 그러면 그 이유는 무엇인지.. 간단하게 탐구해봤다.
정말 React가 대세일까
무릇 천하의 대세란 오랫동안 나뉘면 반드시 합하게 되고, 오랫동안 합쳐져 있다면 반드시 나뉘게 된다.
삼국지연의의 유명한 첫 구절이다. 얼마 전에 유튜브를 보다가 알게 되었는데, 지정학의 원리를 설명할 뿐만 아니라 다른 영역에서도 적용되는 말인 것 같다.
프론트엔드 프레임워크도 오랫동안 jQuery로 대동단결했던 시대 이후 Angular, React와 Vue 등이 서로 경쟁하며 발전해왔으나, 최근에는 React 다시 통일되어 있는 것 같다. 자료를 통해서 살펴보자.
npm trends
npm trends에서는 22년 말의 수상한 스파이크를 제외하고 React의 다운로드 수가 항상 가장 높았다. 23년 8월 20일 기준 다운로드 수를 비교하면 2위인 Vue보다 5.6배 많다.
state of js 2022
state of js에서는 React가 가장 높은 사용자 비율(Usage = would use again + would not use again)을 보이고 있으며, 긍정평가도 가장 높은 것을 볼 수 있다. 특히 "다시 사용하겠다(would use again)"고 응답한 비율이 57.4%로, 이는 그 다음으로 높은 Vue(30.3%)보다 거의 두 배 이상 높은 수치다.
React의 인기를 지지하는 요소에는 메타 프레임워크(state of js에서는 rendering framework라고 표현)도 있다. 메타 프레임워크의 사용자 비율에서도 React 기반의 Next.js와 Gatsby가 각각 1, 2위에 위치해 있으며, Next.js의 경우 Non-React-based-framework 중 가장 높은 수치인 Nuxt에 비해 2.5배 이상의 수치를 기록하고 있다.
Next.js는 긍정/부정 평가에서도 가장 긍정적인 메타 프레임워크인 것을 확인할 수 있다. Next.js가 React에서 추천하는 프로젝트 생성 도구인 만큼, Next.js의 인기가 React의 인기를 지지할 것이라고 추론할 수 있겠다.
위와 같은 자료를 통해서 봤을 때 React가 현재 가장 인기있는 프레임워크라는 점은 확실하고, 강력한 경쟁자가 등장하기 전까지는 React의 인기는 앞으로도 지속되지 않을까 싶다.
React만의 장점들
React가 대세라는 사실은 자연스럽게 바로 다음 질문으로 이어진다. 가장 성공적인 프론트엔드 프레임워크가 된 이유는 뭘까? 우선 선언적 / 컴포넌트 기반 / JSX 문법 / TypeScript 통합처럼 다른 프레임워크와 공통적인 특징은 제외하고 생각해봤다.
1. Less magic, more plain JavaScript
개인적인 경험으로는 Svelte, Vue의 양방향 바인딩 같이 "매직"으로 느껴지는 부분이 리액트에서는 많지 않은 것 같다.
React의 컴포넌트들은 .js 확장자를 가진 plain JavaScript로 작성된다. 이러한 특징은 확장성에 큰 도움이 되고, 런타임에도 (약간의 라이프사이클 개념을 숙지하여 작성하면) 의도한대로 동작할 것이라고 예상하게 된다.
2. 함수 컴포넌트의 단순한 멘탈 모델
클래스 컴포넌트 시대에도 함수 컴포넌트는 존재했지만, 함수 컴포넌트 + hooks API로의 대대적인 변경 이후 React의 컴포넌트 개념은 확실히 단순해졌다.
- 함수 컴포넌트는 주어진 입력(props)에 대해 출력(JSX)을 반환하는 순수함수다.
- 부수효과가 필요하면 hooks를 이용한다.
이러한 변화로 React 앱에 대한 멘탈 모델이 단순해졌을 뿐 아니라, 예측 가능성과 테스트 용이성과 같은 순수함수로서의 장점을 누릴수도 있게 되었다.
3. 승자독식
많은 사용자들이 사용한다는 것은 여러가지 추가적인 효과를 준다. 크고 활발한 커뮤니티와 라이브러리 생태계를 갖게 되고, 많은 기업이 프로덕션에서 사용하게 되면서 채용에서의 유리함을 위해 더 많은 사용자가 유입되는 선순환 구조가 만들어진다.
결론
그래서 결론은? React는 정말 인기가 많으며 구직자 입장에서 리액트를 배우고 사용하지 않을 이유가 없다. 현재 React는 프론트엔드 개발에서 HTML, CSS, JS 다음으로 핵심적인 역량이 되어 있는 것 같다. 그러면 안 되지만 가끔은 앞의 세 개보다 더 우선시 되는 것 같기도 하다...
프로덕션에서 사용되는 프레임워크는 쉽게 변경하기 어려우므로, 더 뛰어난 대체제가 나타나기 전까지는 당분간 이런 흐름은 유지되지 않을까 싶다.
그래도 웹 프론트엔드의 영역의 모든 문제를 해결할 수 있는 silver bullet이 아니라는 점을 명심하고, 언제나 넓은 시야와 새로운 변화에 열린 자세를 갖는 게 중요할 것 같다.
