React와 Vue는 SPA를 구현하기 위해 사용되는 라이브러리/프레임워크이다. 이 둘의 특징과 차이점에 대해 정리해보도록 하겠다.
React, Vue를 사용하는 이유
물론 Vanilla JavaScript만으로도 SPA를 구현할 수 있다. 하지만 React나 Vue를 사용하는 이유는 Virtual DOM이 8할이고 나머지는 뛰어난 재사용성과 유지보수성이 있다.
Virtual DOM
실제 DOM을 조작할 때마다 발생하는 불필요한 리렌더링을 방지하기 위해 가상의 DOM을 생성해서 사용한다.
재사용성
컴포넌트 단위로 작업하기 때문에 재사용성이 뛰어나다.
유지보수
화면을 구성하는 로직과 데이터를 관리하는 로직이 분리되어 있어 유지보수성이 높다.
React와 Vue 차이점
1. 라이브러리 VS 프레임워크
리액트는 라이브러리, 뷰는 프레임워크이다. 때문에 리액트의 자유도가 더 높은 편이다.
뷰는 정해진 기능을 가져다 사용하는 방식이라고 생각하면 된다.
리액트는 추가 기능이 필요할 경우 직접 구현하거나 별도 라이브러리를 설치해서 사용한다.
2. 데이터 바인딩
리액트는 단방향 데이터 바인딩을 사용하고, 뷰는 양방향, 단방향 데이터 바인딩을 모두 사용한다.
데이터 바인딩이란, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 방법을 말한다.
단방향 데이터 바인딩
- 데이터가 단방향(부모→자식)으로 흐른다.
- JSX를 사용하여 JavaScript→HTML 방향으로 데이터 바인딩이 가능하다.
- 추적과 디버깅이 쉽다.
- 사용자의 입력으로 인해 데이터가 변경되더라도 바로 화면에 업데이트 되지 않는다. 따라서 데이터의 변경을 감지하는 코드와 화면을 업데이트 하는 코드를 따로 작성해주어야 한다.
양방향 데이터 바인딩
- 데이터가 양방향(부모↔️자식)으로 흐른다.
- JavaScript→HTML, HTML→JavaScipt 방향으로 데이터 바인딩이 가능하다.
- 사용자가 입력하는 대로 화면에 반영된다.
- 코드량이 줄어들기 때문에 웹 애플리케이션의 복잡도가 높아질수록 코드 관리에 도움을 준다는 장점이 부각된다.
- 데이터 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능 저하의 우려가 있다.
3. 리소스 구조
뷰는 기존에 html, css, JS로 나눠서 작업하던 방식과 유사하기 때문에 비교적 익숙하다.
반면 리액트는 모든 작업을 JS로 한다. 물론 CSS(SASS)를 분리해서 사용하기도 하지만 요즘은 CSS-in-JS로 바뀌는 추세이다.
4. 그 외
- 타입스크립트는 리액트에 더 최적화 되어 있다. (React는 JS이기 때문)
- 뷰의 경우 비교적 문법이 쉽다. (JS 문법에 익숙하지 않아도 작업이 가능하다.)
+=