요즘 사업을 하다보면 회사들이 앱개편을 엄청 많이 하고 있고,
React Vue 적용을 거의 필수로 하여 기본개념 이해하는 차원으로 정리하였습니다
출시시기가 Angular 2010, React 2013, Vue 2014 최초 릴리즈
Svelte가 가장 신생 프레임워크인데, 선호도 측면에서 높은 것 같습니다
1. React를 이해하기 위한 사전 지식
화면 개발의 필수 요소 HTML, CSS, JavaScript
React를 쉽게 이해하기 위해서는 웹공부할때 사용하는
HTML, CSS, JavaScript 를 이해할 필요가 있어요
HTML이 기본 틀, CSS 스타일, JavaScript가 동적인 제어를 담당합니다
html은 보통 DOM를 처리한다고 많이 표현하는데, 이때 DOM이란
- DOM(Document Object Model) : HTML 요소들의 구조화된 표현으로, 객체에 해당합니다
- DOM은 웹 브라우저와 Javascript가 HTML을 이해하기 쉽도록 트리 구조로 파싱하여 만든 객체 입니다.
head, body 이런거 많이 보셨죠?
- CSSOM(Cascading Style Sheets Object Model) DOM에 CSS를 입힌 것입니다
JQuery의 등장
화면에서 동적이 변화가 많아짐에 따라 DOM을 좀 더 편리하게 다루는 기술이 필요했습니다
우리가 흔히 듣는 JQuery는
- jQuery : 동적으로 DOM을 제어하고, 쉬운 코드 때문에 빠르게 배울 수 있고, 모토처럼 js보다 적은 양의 코드로도 개발가능
JavaScript를 보다 쉽고 빠르게 이용할 수 있도록 구현된 라이브러리
문제는 jQuery 한계 : 페이스북, 인스타그램과 같이 사용자와의 interaction이 많은 웹 앱 특성상 성능이 가장 중요
1) jQuery는 vanila에 비해 로드해와야 할 패키지가 많아 간단한 코드를 작성하더라도 성능적으로 떨어짐
2) jQuery는 조각칼로 DOM을 깎아서 만드는 것에 비유할 수 있어서 대규모 앱에서 유지보수가 쉽지 않습니다. 모듈화나 컴포넌트화 와는 거리가 있움
3) Interactive Web, 즉 위에서도 언급했듯 웹 어플리케션으로 불리는 요즘의 웹에선 사용자에 의한 동적인 DOM 조작이 잦은데, 이때 jQuery를 이용하면, 배치와 화면표시에 많은 연산을 발생시키기 때문에 브라우저의 성능이 낮아지는 문제가 있습니다.
2. React 탄생 배경
React를 이해하기 위해서는 왜 나왔는지 살펴볼 필요가 있음
웹만 있었을때는 크게 문제가 없었음
문제는 모바일웹, 앱이 등장하면서 각각 개발이 필요해지기 시작함
화면도 너무 많아지고, 그에 따라 대응해야하는 화면처리로직, 데이터 비즈니스 로직도 많아짐
최대한 간략하게 처리할 수 있는 방법이 필요함
예를 들어 화면의 특정부분만 변경되면 그 변경된 부분만 바뀌면 되는데
문제는 전체 데이터를 다시 가져와서 뿌려주는 것이 발생함
그런데 jQuery는 한계가 생김 그래서 탄생함
"어떻게 하면 변경된 부분만 데이터를 가져와서 변경할 수 있을까?"
라는 고민에서 React, Vue 등이 만들어짐
결국, 모바일이 대세인 시점에 매우 중요한 언어가 되어 가고 있음
금융권도 최근에 React를 적용하는 사례가 많이 증가하고 있음
3. React의 개념
웹/앱의 View를 개발할 수 있도록 하는 라이브러이
Front-End를 개발하기 위한 언어
어플리케이션을 위해서 1) UI 2) UI를 컨트롤 하기 위한 로직 3) 데이터 처리하는 비즈니스 로직 필요
React는 웹 개발에서 사용되는 라이브러리로 다양한 기능과 활용 방법이 있습니다
예를 들어 정적 서비스를 제공하기 위해 S3 Bucket을 이용할 수 있으며,
Context API를 통해 컴포넌트 트리 안에서 전역적으로 관리할 필요가 있는 데이터를 공유할 수 있습니다
또한, 모바일 UI 테스트 자동화에도 활용되며,
Micro-Frontend 실습에도 사용됩니다. React 환경설정에는 babel과 같은 도구를 사용하며
npm을 통해 react-dom을 설치하여 사용합니다.
이 외에도 다양한 활용방법이 있으니 필요에 따라 적절히 활용하시면 됩니다
4. React의 특징
1. 선언형
2. 컴포넌트 기반으로 재사용성이 뛰어남
3. Virtual DOM기반으로 가볍다
4. React 컴포넌트는 stat와 props을 가진다
React와 Vue 공통점
둘다 컴포넌트와 shadowDOM을 사용함
Router를 통해 Single Page Application 개발 가능
Server Side Rendering 프레임워크 존재
네이티브 모바일 어플리케이션 개발 사용 가능
Virtual DOM을 활용하여 성능 높이고, 컴포넌트를 사용함
Virtual DOM이란 화면의 DOM과 동일한 Virtual DOM을 메모리 상에 만들고 DOM 조작 시 메모리 상의 Virtual DOM에서 연산을 수행한 후 마지막에 실제 DOM으로 넘기는 방식을 통해 연산 효율성을 높임
React와 Vue 차이점
React는 ML/DL에서 활용하는 Python의 Tensorflow와 같은 '라이브러리'
Vue와 Angular는 Android, Java의 Spring와 같은 '프레임워크'
React는 비즈니스 로직 중시하는 회사에서 많이 사용
Vue는 데이터 로직을 중시, DB 중심 로직하고, 비즈니스 로직은 후순위로 둔다
React는 호환성을 포기한 대신 개발자에게 높은 자유도를 주었음
Vue는 그 자유도에 제한이 있는 대신 높은 호환성을 얻었다
Frond-end 상태계에서 어느 한쪽이 한쪽을 대체하기엔 지향하는 바가 명확 다름
React
- 페이스북에서 만듬
- 자료가 많고, 다양한 라이브러리와 생태계가 존재하여 개발 생산성을 향상 가능
- 유연성 높고 성능 초점
- 대규모 애플리케이션 개발에 적합한 프레임워크
- 가상 DOM 기반의 효율적인 렌더링 방식으로, 사용자 인터페이스가 빠르게 업데이트 가능
- 컴포넌트 기반 아키텍처를 제공하여 코드의 재사용성과 유지 보수성을 높일 수 있음
- 자바스크립트와 함께 사용하기 쉬움
- 초기 학습 곡선이 다소 가파르고, 라우팅이나 상태 관리와 같은 추가 기능은 별도의 라이브러리가 필요
- 라이브러리는 특정 기능이 필요할 때, 개발자가 원하는 기능을 라이브러리에서 호출
- 단점은 초기 로딩시간이 길다
Vue
- 코드가 깔끔하고 배우기 쉬움
- React 보다 늦게 만들어지지만 더 쉬워서 인기가 많음
- 직관적인 문법과 가벼운 크기로 알려져 있는 프레임워크
- 작은 규모의 애플리케이션 개발에 특히 적합
- HTML 템플릿과 자바스크립트를 쉽게 결합할 수 있는 직관적인 문법
- 가벼운 크기와 빠른 성능으로 알려져 있으며, 초기 렌더링 속도와 반응성이 우수
- 단일 파일 컴포넌트 형식을 제공하여 개발자들이 컴포넌트 기반의 구조를 쉽게 구축할 수 있도록 지원
- React나 Angular에 비해 상대적으로 작을 수 있고, 대규모 프로젝트에서는 추가적인 상태 관리 라이브러리나 패턴이 필요
- Vue문법 몇개 외워두면 코딩이 가능함
- 간단한 템플릿 구문을 활용해 선언적으로 DOM에 데이터를 렌더링함
- 단, 커뮤니티가 부족함
- 네이버의 VIBE도 Vue로 개발하였고, 카카오도 Vue로 절반은 개발을 많이함
- 자바를 잘 모르면 Vue를 하는 것이 좋음
Angular
- 상대적으로 무겁고 배우기 어려움
- 완전한 기능 세트와 강력한 템플릿 기능
- 복잡한 프로젝트에 적합
- 프레임워크 자체에서 라우팅, 상태 관리, 폼 처리 등 다양한 기능을 제공
- TypeScript를 기반으로 한 정적 타입 검사를 지원하여 코드의 안정성을 높일 수 있음
- Angular는 컴포넌트 기반 아키텍처와 의존성 주입(Dependency Injection)을 강력하게 지원하여 확장성과 유지 보수성 향상
- 학습 곡선이 다소 가파르고, 프레임워크의 크기가 크며 초기 로딩 시간이 오래 걸릴 수 있음
- 업데이트 주기가 빠르기 때문에 업데이트에 따라 코드를 변경할 수 있음
https://velog.io/@vraimentres/react-vs-vue-2
https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD