:) 리액트(React)와 뷰(Vue)에 대해 정리할게욥

React란?

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. Facebook에서 개발하고 유지 관리하며, 주로 단일 페이지 애플리케이션(SPA)의 개발에 사용된다.

• 단일 페이지 애플리케이션(Single Page Application, SPA)
  • 단 하나의 HTML 페이지에서 필요한 모든 콘텐츠를 동적으로 로드하고 표시하는 방식이다.
  • 사용자와의 상호작용에 따라 필요한 데이터만 서버로부터 가져와서 현재 페이지를 동적으로 갱신한다.
  • 전체 페이지를 새로고침할 필요 없이 애플리케이션처럼 부드러운 사용자 경험을 제공한다.

React 특징

• 컴포넌트 기반: React는 재사용 가능한 컴포넌트로 UI를 구성한다. 각 컴포넌트는 독립적으로 관리되며, 이를 조합하여 복잡한 UI를 구성할 수 있다.

• 가상 DOM 사용: React는 가상 DOM을 사용하여 실제 DOM의 변화를 최소화한다. 이는 애플리케이션의 성능을 향상시키며, 효율적인 업데이트를 가능하게 한다.

  Virtual DOM은 웹 페이지의 UI를 추상화한 것으로, 실제 DOM(Document Object Model)의 경량 버전

  • DOM(Document Object Model)은 웹 페이지의 콘텐츠와 구조를 프로그래밍 언어가 이해하고 조작할 수 있도록 하는 표준화된 인터페이스이다. 웹 페이지의 HTML 또는 XML 문서를 노드의 트리 구조로 표현하며, 이를 통해 개발자는 문서의 구조, 스타일, 내용을 동적으로 읽고 변경할 수 있다.

• 선언적 뷰: React는 선언적으로 뷰를 설계할 수 있게 해준다. 애플리케이션의 상태가 변경되면 React가 자동으로 효율적인 방식으로 UI를 업데이트한다.

  • React에서 선언적 뷰 예시

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }
  
  - name이라는 프로퍼티를 받아, 'Hello, [name]' 형식의 메시지를 표시하는 UI를 선언

• 단방향 데이터 바인딩: React는 단방향 데이터 흐름을 사용한다. 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르며, 이는 애플리케이션의 데이터 흐름을 예측 가능하고 관리하기 쉽게 만든다.

---

Vue란?

Vue.js, 일반적으로 Vue로 알려져 있는 것은 사용자 인터페이스를 구축하기 위한 프로그레시브 자바스크립트 프레임워크이다. Evan You에 의해 개발되었으며, 복잡한 싱글 페이지 애플리케이션(SPA)을 구축하는 데 적합하다.

Vue 특징

• MVVM 패턴 (Model-View-ViewModel)
  : 애플리케이션의 구조를 데이터 모델(Model), 사용자 인터페이스(View)와 이 둘을 연결하는 중간자(ViewModel)로 분리하는 소프트웨어 디자인 패턴이다.

MVVM 구성 요소

• Model: 애플리케이션의 데이터와 비즈니스 로직을 포함한다. 서버와의 통신, 유효성 검사 또는 데이터의 조작과 같은 기능을 담당한다.

• View: 사용자에게 보이는 UI 부분. HTML과 CSS를 사용하여 구현되며, 사용자의 입력을 받고 표시한다.

• ViewModel: View와 Model 사이의 연결 고리 역할을 한다.
  Vue.js에서는 ViewModel이 데이터 바인딩과 이벤트 바인딩을 처리하여 View와 Model의 동기화를 담당한다. 이는 Model이 변경될 때 View가 자동으로 업데이트되게 하며, 반대로 사용자의 인터랙션을 Model에 반영한다.

데이터 바인딩

• Vue.js에서 MVVM 패턴의 핵심은 양방향 데이터 바인딩이다. ViewModel을 통해 View의 변경 사항이 모델에 자동으로 반영되며, 반대의 경우도 마찬가지이다. 이는 개발자가 복잡한 코드를 작성하지 않고도 UI와 데이터 상태를 쉽게 동기화할 수 있도록 해준다.

• 컴포넌트 기반 아키텍처
  : 애플리케이션을 재사용 가능하고 독립적으로 관리할 수 있는 작은 단위, 즉 '컴포넌트'로 구성하는 방식을 말한다. 각 컴포넌트는 자신만의 HTML, CSS, JavaScript를 가지며, 이를 조합하여 복잡한 사용자 인터페이스를 구축할 수 있다.

---

React == Library, Vue == Framework ?

• React
  라이브러리 : React는 자체적으로 '라이브러리'라고 정의된다. 이는 React가 주로 UI 렌더링에 집중하고 있으며, 애플리케이션의 다른 부분들을 구성하는 데 필요한 것들은 개발자가 별도로 선택하여 추가해야 함을 의미한다.
  예를 들어, 상태 관리를 위해 Redux나 Recoil를 사용할 수 있고, 라우팅을 위해 React Router를 추가할 수 있다.
  
  특징 : React는 UI 컴포넌트를 만드는 데 초점을 맞추며, 유연성을 제공한다. 개발자는 애플리케이션의 구조를 결정하고, 필요에 따라 다양한 라이브러리를 조합할 수 있다.

• Vue
  프레임워크: Vue는 '프레임워크'로 더 자주 분류된다. 이는 Vue가 UI 렌더링 뿐만 아니라, 애플리케이션을 구성하는 데 필요한 다양한 도구와 규칙을 함께 제공하기 때문이다.
  Vue는 라우팅을 위한 Vue Router, 상태 관리를 위한 Vuex 등을 포함한, 보다 포괄적인 솔루션을 제공한다.
  
  특징 : Vue는 개발자가 보다 일관된 방식으로 애플리케이션을 구축할 수 있도록 지원한다. Vue의 에코시스템은 많은 기본 기능을 내장하고 있으며, 이는 통합과 일관된 개발 경험을 제공한다.