React는 공홈에서 아래와 같이 웹, 네이티브 유저 인터페이스를 위한 라이브러리라고 정의합니다.
리액트 다음으로 유명한 Vue, Angular는 어떨까요?
뷰는 웹 유저 인터페이스를 만들기 위한 프레임워크
앵귤러는 웹 개발 프레임워크라고 정의하고 있습니다.
리액트는 라이브러리, 뷰와 앵귤러는 프레임워크라고 하는데 둘의 차이점이 있을까요?
# 프레임워크와 라이브러리 차이점
프레임워크와 라이브러리는 모두 소프트웨어 개발을 돕는 재사용 가능한 코드 집합이지만, 주요 차이점은 다음과 같습니다.
1. 제어 흐름
라이브러리: 애플리케이션 코드가 라이브러리를 호출하고 제어 흐름을 가집니다.
프레임워크: 프레임워크가 제어 흐름을 가지며, 특정 지점에서 애플리케이션 코드를 호출합니다.
2. 통합 및 확장성
라이브러리: 필요한 기능만 가져와 이용합니다.
프레임워크: 프레임워크에서 제공하는 아키텍처와 디자인 패턴을 따라야 합니다. 그렇지 않으면 프레임워크 자체를 수정해야 할 수도 있습니다.
3. 종속성
라이브러리: 애플리케이션 코드가 라이브러리에 의존합니다.
프레임워크: 프레임워크가 애플리케이션 코드에 종속되어 있습니다.
4. 학습 곡선
라이브러리: 각각의 라이브러리에 대한 문서를 따로 학습해야 합니다.
프레임워크: 프레임워크 전체를 이해해야 하므로 학습 곡선이 높습니다.
생성형 AI 챗봇인 클로드에서 위와 같이 답변을 들을 수 있습니다.
요약하자면 라이브러리는 개발자가 제어 흐름을 가지고 필요한 기능만 사용하고
프레임워크는 애플리케이션 개발을 위한 기반 구조와 제어 흐름을 제공하는 프레임워크 규칙을 따라 개발을 해야 합니다.
React는 왜 써야 하는 것일까?
React는 컴포넌트 기반 아키텍처를 추구하는 도구로서
- 컴포넌트 기반 아키텍처
- UI를 재사용 가능한 컴포넌트로 분리하여 개발할 수 있습니다.
- 코드의 모듈화와 재사용성이 높아지며, 유지보수가 용이해집니다.
- 마크업 조작 편리
예를들어 .map과 마크업을 함께 쓸 수 있습니다. - 뛰어난 테스트 용이성
- 컴포넌트 기반 구조와 함수형 프로그래밍 모델 덕분에 테스트 코드 작성이 수월합니다.
- 철저한 테스트를 통해 안정성과 유지보수성을 높일 수 있습니다.
- 크로스 브라우저 호환성
- React는 가상 DOM을 사용하여 브라우저 간 렌더링 차이를 해결합니다.
- 재사용성과 이식성
- React 컴포넌트는 웹뿐만 아니라 모바일 및 데스크톱 애플리케이션에서도 재사용할 수 있습니다.
React 특징
Virtual DOM
DOM은 HTML 구성을 프로그래밍 언어로 접근할 수 있게 만든 인터페이스입니다.
DOM을 조작하여 UI를 변경시킬 수 있지만, DOM을 조작하는 것에는 큰 리소스가 소요됩니다.
따라서, 리액트는 Virtual DOM을 사용해 화면 렌더링을 조절합니다. 자바스크립트 객체 형태로 복사하여 메모리에 저장합니다.
특정 값이 바뀌거나 텍스트의 색상, 배경색상 등 CSS가 변경될 때 DOM을 직접 조작하기보다 메모리에 있는 객체를 조작하기에 리소스를 효율적으로 사용할 수 있습니다.
이후에 DOM과 Virtual DOM을 Diffing 알고리즘을 통해 비교를 하고 Virtual DOM의 상태로 DOM을 업데이트하게 됩니다.
기존 DOM을 조작하는 것보다 효율적인 방법이지만, Virtual DOM이 오버헤드가 크고 초기 렌더링시에 비용이 크다는 문제점이 있어 Virtual DOM을 사용하지 않는 프레임워크들도 많이 있습니다.
SPA(Single Page Application)
SPA 개념은 2005년 Gmail, 구글 맵 등의 웹앱이 나오면서 SPA개념이 대중화되었지만
본격적으로 알려지고 개발된 건 앵귤러, 리액트, 뷰 등의 웹 개발 도구들이 등장하면서 개발이 보편화되었습니다.
SPA란 무엇이며 어떤 장점이 있을까요?
단어 뜻 그대로 한 페이지로 이루어진 웹 앱을 뜻하며, 하나의 HTML에서 자바스크립트를 로드하여 콘텐츠를 동적으로 보여주는 웹입니다.
마치 여러 페이지인 것처럼 동작할 수 있도록 라우팅 기능이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>서버로부터 index.html, main.js를 한번 받아온 뒤로 페이지 리로드 없이 콘텐츠를 동적으로 업데이트합니다.
자바스크립트를 활용해 UI를 렌더링 하고 이벤트를 처리합니다.
사용자 인터렉션마다 서버로부터 데이터를 새로 받고 UI를 바꾸지 않고 처음 받은 main.js를 통해 이벤트를 처리하고 UI를 렌더링 합니다.
클라이언트에서 UI를 그리고 이벤트를 처리하는 등 많은 부분을 클라이언트에서 처리하는 CSR 방식으로 아래와 같은 장단점이 있습니다.
# 장점
1. 웹 서버 부하가 적어진다.
2. 사용자 경험이 좋아진다.
3. 웹 서버와 통신량이 줄어든다.
# 단점
1. 초기 로딩속도가 길다.
2. SEO에 적절하지 않다.
3. 브라우저 기능에 의존적이다.
4. 보안 취약점이 존재 가능성이 있다.
보안 이슈가 중요한 프로젝트라면
또는, 공식 홈페이지와 같이 SEO가 중요하고 검색엔진 노출이 중요한 콘텐츠라면
서버에서 렌더링 한 페이지를 받아오는 SSR을 사용할 수 있습니다.
Reactjs, vuejs에서도 SSR을 사용할 수 있지만, 리액트라면 express를 설치하여 세팅해야 하고
뷰라면 createSSRApp와 같이 서버를 띄우고 node로 실행해야 하는 등 복잡한 과정이 들어갑니다.
그렇기에 React는 Next.js 또는 Remix.js를
Vue는 Nuxt.js를 사용하여 개발하는 것을 추천합니다.
웹 프레임워크 / 라이브러리
웹을 개발하기 위한 도구로서 대표적인 도구로는 Vue.js, Augular, Svelte 등이 있습니다.
아래 이미지는 웹 프레임워크 벤치마크에서 사용하는 필터로 웹을 만들 때 사용 할 수 있는 도구들이 굉장히 많습니다.
그렇기에 어떤 도구를 써야 할지 고민하고 상황에 맞는 도구를 선택하는 것이 중요합니다.
웹을 만들 수 있는 도구는 다양하지만 대표적인 도구는 아래와 같습니다. 아래 이미지는 사용량을 기준으로 정렬한 차트입니다.
리액트의 사용률은 압도적입니다.
그렇다면 왜 리액트가 압도적인 사용률을 가지는 것일까요?
성능이 좋아서 리액트를 사용하는 것일까요?
웹 프레임워크 / 라이브러리 성능 비교
아래 이미지는 2015년부터 지속하고 있는 js framework 벤치마크로 Krause라는 사람이 진행하고 있습니다.
벤치마크에 대한 상세 정보는 https://github.com/krausest/js-framework-benchmark에서 확인 가능합니다.
위 표를 보면 리액트의 geometric 점수가 낮습니다.
화면을 그리는데 바닐라 자바스크립트가 1.03이라고 할 때 1.61 정도라는 뜻입니다.
약 1.5배 정도 느리다고 할 수 있습니다.
성능으로 치면 solid, svelte, lit, vue, anuglar, react 순이네요.
2020년 자료입니다만, 모바일 환경에서 리액트는 다른 메이저 웹 도구에 비해 현저하게 느립니다.
느리다는 것은 LCP, FCP 점수를 좋게 받을 수 없으며 구글 SEO에 좋은 평가를 받기 어렵습니다.
이러한 리액트를 많이 사용하는 이유는 무엇일까요?
React 많이 사용되는 이유
여기서부터는 제 사견입니다. 다른 의견이 있다면 댓글로 의견공유 부탁드립니다.
구글 검색으로 리액트, 앵귤러, 뷰의 출시일을 검색해 보면
Angular- 2010년 10월 20일 (구글)
React - 2013년 5월 29일 (페이스북)
Vue - 2014년 2월 (구글 앵귤러 개발자였던 Evan You)
앵귤러가 출시는 훨씬 앞섰지만 굉장히 무거웠습니다. 게다가 SPA에서는 절대적으로 필요성이 높은 전역 상태관리를 추가로 사용한다면 첫 그래프에서 Angular + ngrx의 퍼포먼스는 39점 React + Redux의 퍼포먼스는 67점입니다. Mobx를 쓰면 82점까지 올라가네요. 이런 차이가 개발자들도 체감이 되면서 점차 이동한 것으로 보입니다.
성능 외에도 비용절감을 위해선 네트워크 전송량도 조절해야 합니다. KB라고 작은 크기라고 무시할 수 없는 게 요청이 적다면 문제가 되지 않겠지만, 하루에 만 건 10만 건이라면 매일 GB단위로 사용량이 발생합니다. 이에 따른 웹 서버 비용, API 서버 비용이 추가된다는 것을 보면 앵귤러의 큰 크기도 분명 문제가 됐을 것입니다.
위기를 느낀 구글이 앵귤러 2를 2016년에 출시 하였지만 이미 커뮤니티 크기의 차이가 벌어진 뒤었고 앵귤러의 첫인상이 좋지 않았기에 앵귤러2를 사용하는 사람도 적지 않았을까 합니다. 추가로 더 좋은 성능의 프레임워크들이 많이 등장하고 있기도 하고 앵귤러는 구조적으로 느릴 수밖에 없는 문제점이 있다는 얘기도 있습니다.
제 웹 커리어에서 Vue가 차지하는 비중이 크고 선택할 수 있는 환경이라면 Vue를 더 선호했지만
최근 Nuxt를 개발하면서 npm을 yarn으로 마이그레이션 하는 도중
Yarn berry에서 Nuxt3가 pnp 패키지를 지원하지 않는 것을 보고 충격을 받았습니다.
Yarn berry가 나온 지 꽤 지났지만 nuxt로는 사용할 수 없고 classic으로만 yarn을 사용해야 한다는 게 꽤나 놀라웠습니다.
그래서 pnpm을 선택하긴 했지만, 이러한 차이점에서 생태계가 큰 도구를 개인 선호도보다 중요할 수 있겠다 싶었습니다.
또한, 최근 면접관으로 들어가면서 100이면 99 React 사용자이고 Vue를 사용해 본 면접자가 너무 적어 어쩔 수 없이 React 진영을 선택해야 하는 문제도 있었습니다.
참고
https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/
State of JavaScript 2022: Front-end Frameworks
This chart splits positive (“want to learn”, “would use again”) vs negative (“not interested”, “would not use again”) experiences on both sides of a central axis. Bar thickness represents the number of respondents aware of a technology.
2022.stateofjs.com
https://github.com/krausest/js-framework-benchmark
GitHub - krausest/js-framework-benchmark: A comparison of the performance of a few popular javascript frameworks
A comparison of the performance of a few popular javascript frameworks - krausest/js-framework-benchmark
github.com
https://krausest.github.io/js-framework-benchmark/2024/table_chrome_124.0.6367.91.html
Interactive Results
krausest.github.io
React
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizati
react.dev
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
https://survey.stackoverflow.co/2023/#technology-most-popular-technologies
Stack Overflow Developer Survey 2023
In May 2023 over 90,000 developers responded to our annual survey about how they learn and level up, which tools they're using, and which ones they want.
survey.stackoverflow.co
https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb
Virtual DOM (React) 핵심정리
리액트가 수많은 개발자들 사이에서 엄청난 사랑을 받는 이유중 한가지는 바로 빠른 속도입니다.
callmedevmomo.medium.com
댓글