React vs Vue

ttugi·2022년 3월 15일

0.

부끄럽지만,, 원래는 '다들 다 이거 쓰네?..' 하면서 React와 Vue 학습을 시작했다.
최근 들어서 뭘 하기 전에는 항상 '왜' 하는지 먼저 생각하는 습관을 만들기 위해 노력중이라 이 주제에 대해 한번 정리하고 갈 필요를 느꼈다..! 홧팅

1. React와 Vue를 왜 사용할까?

React와 Vue를 비교하기 앞서 이 둘이 SPA 중심에 (아직까지는)대표적인 라이브러리/프레임워크인 이유를 먼저 알아보기로 했다.

React와 Vue는 Angular와 함께 single page application 제작에 사용되는 대표적인 라이브러리/프레임워크이다.

SPA (Single Page Application)
정적 리소스를 최초에만 로드하고 이후 새로운 페이지 요청을 받을 때 새로고침 없이 갱신에 필요한 데이터만 받아와서 갱신하는 방식이다.

1-1. 🤔 그럼 SPA는 리액트, 뷰, 앵귤러로만 만드는거야?

SPA를 만든다고 해서 꼭 React, Vue, Angular를 사용해야 하는 것은 아니다.

1-2. 🤔 그럼 왜 React와 Vue를 대표적으로 사용하는 거지?

Virtual DOM 렌더링
실제 DOM을 조작하지 않고 가상 DOM으로 html을 렌더링하기 때문에 브러우저의 렌더링 횟수가 줄어들고, pc자원 소모를 감소할 수 있다.

Virtual DOM
메모리상에 존재하는 가상 DOM 이다.
Virtual DOM에 대하여 설명하기 위해서는 브라우저의 렌더링 과정을 먼저 알아보는 것이 좋지만, 이 내용은 따로 다뤄보는게 좋을 것 같다.

우선, 변경된 노드가 있을 경우 Virtual DOM이 수행하는 작업은 아래와 같다.
1. 전체 UI를 Virtual DOM에 렌더링
2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용

유지보수성
화면 요소를 제어하는 코드와 데이터를 제어하는 로직을 분리하여 코드가 직관적이고, 유지보수성이 높아진다.
재사용성
컴포넌트 단위로 개발을 함으로써 재사용성이 높다.

2. 데이터 바인딩 방식

리액트와 뷰를 비교하기 앞서서 정말 마지막으로! 데이터 바인딩 방식에 대해 한번 정리해보는 것도 필요하다. 이것까지만 알아보고 둘의 차이점을 알아볼 것이다.

2-1. 먼저, 데이터 바인딩이란

두 개의 데이터 소스(또는 동일한 데이터에 대한 두 개의 개별 표현)를 함께 연결하고 동기화 상태를 유지하는 일반적인 기술이다.
데이터 바인딩은 대표적으로 단방향과 양방향 데이터 바인딩으로 나누어 구분된다.

2-2. 단방향 데이터 바인딩 (One-Way Data Binding)

적절한 이벤트를 통해 데이터 흐름이 단방향(부모→자식)으로 이루어진다.
리액트의 경우 단방향 데이터 바인딩 구동 원리는 다음과 같다.
- Javascript → HTML 방향으로 데이터 바인딩이 가능하며, JSX 문법을 사용해 DOM을 생성한다.
사용자 입력에 따라 변경된 데이터가 있어도 뷰가 바로 업데이트 되지 않는다.
(데이터 변경 감지, 이에 따른 화면 업데이트 코드를 따로 작성해야 한다.)

2-3. 양방향 데이터 바인딩 (Two-Way Data Binding)

데이터 변경에 따라 프레임워크를 통해 양방향(부모↔︎자식)으로 이루어진다.
화면의 입력에 따라 데이터가 갱신된다.
Javascript → HTML, HTML → Javascript 방향으로 데이터 바인딩이 가능하다.
변경된 데이터가 있으면 뷰가 바로 업데이트 된다.

2-4. 🤔 단방향보다 양방향 바인딩이 더 편하고 좋아보이는데?!

항상 그런 것도 아니다. 둘다 장단점이 있고, 상황에 알맞게 사용해야 한다.
만약 단방향 바인딩만 사용하여 구현할 수 있는 요소를 굳이 양방향 바인딩을 사용한다면, 불필요한 리소스 확보로 인해 성능 저하에 영향을 끼칠 수 있다.

.. !
드디어 본론..!
그래서 React와 Vue는 서로 뭐가 달라?

3. React vs Vue

둘을 비교하기 앞서 마지막으로, React와 Vue의 차이점에 대한 좋은 설명들은 쉽게 찾아볼 수 있었기에,
자료를 찾아보고 사용하면서 개인적으로 느꼈던 차이점도 함께 작성하기로 했다.

3-1. 차이점

React
- 단방향 데이터 바인딩
  - 단점 :: 단방향 데이터 바인딩은 데이터를 갱신하고 화면을 업데이트 해야할 경우, 데이터의 변경을 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다.
  - 장점 1 :: 데이터 변화에 따른 불필요한 리소스 확보를 할 가능성이 단방향보다 적으므로 데이터 변화에 따른 성능 저하가 없다.
  - 장점 2 :: 데이터 흐름에 일관성이 있어 코드를 이해하기 쉽고 데이터 추적과 디버깅이 용이
- 거대한 개발자 커뮤니티
  (물론 Vue 개발자 커뮤니티의 성장도 빠르다.)
- 프레임워크가 아니라 '라이브러리'
  - 프레임워크는 필요한 것들이 모두 갖춰져 가져다 쓰는 느낌이라면, 라이브러리는 최소한의 기능을 가지고 있는 느낌이다.
  - 따라서 추가로 기능이 필요한 경우, 리액트 관련 라이브러리를 설치하거나 직접 만들어야 하는데, '이 때 리액트의 거대한 개발자 커뮤니티가 장점으로 더 발휘되는 것이 아닐까?' 싶다.
- "나는 완전 자바스크립트야! 💁‍♀️"
  (이건 개인적으로 느낀 점!)
  - 개인적으로는 React를 사용할 때, JSX문법을 사용하기 때문에 html, css까지도 '완전 다 자바스크립트로!' 라는 느낌을 받았다.
  - 이런 점이 처음 사용했을 때 낯설게 느껴져서 리액트에 대한 러닝커브가 더 높아 보였다.
Vue
- 단방향, 양방향 데이터 바인딩 둘다!
  - 리액트(단방향), 앵귤러(양방향)의 장점을 모두 가져온 듯한 느낌이다. 실제로 뷰는 리액트를 참고하여 만든 프레임워크라고 하니..!
  - Vue의 양방향 데이터 바인딩은 프레임워크에서 데이터 변경을 감지하고 입력값, 변경값에 따라 내용이 바로 바뀌기 때문에 따로 체크해주지 않아도 된다.
  - 장점 :: 데이터 변경 감지와 이에 따른 업데이트 코드 작성에 의해 증가하는 코드량을 줄여준다.
  - 단점 :: 변화에 따른 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있다.
- 개발자 커뮤니티의 성장 속도가 빠르다.
  - 리액트보다는 작지만, 리액트보다 뷰가 늦게 나왔고, 성장 속도가 빠르다는 점에서 앞으로도 규모가 커질 것으로 보인다고 한다고 한다고 한다.
- 라이브러리가 아니라 '프레임워크'
- "나 좀 익숙하지? (˵ ͡° ͜ʖ ͡°˵)"
  (이것도 개인적으로 느낀 점!)
  - 뷰는 HTML, CSS, Javascript가 잘 분리되어 있어 가독성이 좋다고 느꼈고, 리액트보다 더 친근해서 러닝커브가 높지 않다고 느껴졌다.

3-2. '둘다 엄청 달라 보이지는 않는데.. 🤔'

그래서 각자 언제 사용해야 알맞을까?

주로 규모가 크고 복잡한 서비스는 리액트를 사용한다고 한다.

(아래 내용부터는 정확한 정보가 아니라 개인적인 추측이다.)

아직 이 둘의 장단점을 몸소 느낄 수 있을만한 경험이 없어 아쉽지만, 개인적인 추측으로는 아래의 차이점에서 결정되는 것은 아닐까 싶다.

데이터 바인딩 방식의 차이점
- 서비스의 규모가 클수록 코드량과 추적해야하는 데이터의 양, 디버깅이 필요한 상황이 많아진다.
- 자유도가 높아질수록 에러 발생 가능성이 높아지는데,(대표적인 예로 자바스크립트와 타입스크립트를 들 수 있을 것 같다.)
  뷰는 단방향/양방향 모두 사용이 가능하니 자유도 측면에서는 리액트보다 높다고 생각된다.
  이 점에서 리액트의 단방향 데이터 바인딩이 일관성을 가져 장점이 돋보이는 것으로 보인다.
- 근데 그렇다고 해서 규모가 큰 서비스에서 무조건 리액트를 사용하는 것은 또 아닐텐데.. 이 둘의 장단점을 몸소 느낄 수 있는 기회가 오면 좋겠다 ;-;
개발자 커뮤니티의 규모
- 개발자 커뮤니티가 클수록, 다양한 에러와 필요한 추가 기능 등 솔루션을 상대적으로 더 쉽게 찾을 수 있으니까..? 🤔

-끝-

ttugi