[Vue] Vue에 대하여

Logun·2023년 10월 25일
vue뷰프론트엔드

Vue.js

목록 보기
1/1
post-thumbnail

✅ React와 Vue

React

  • React란 ?

    • 리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

    • 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다.

    • 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.

  • 장점

    • 가상 DOM을 사용해서 갱신되는 싱글 페이지 애플리케이션의 리플로우와 리페인트를 최소화함으로써 성능을 최적화 시킨다.

    • 컴포넌트 기반의 아키텍쳐를 가지고 있어, 재사용 가능한 컴포넌트는 생산성과 유지 보수를 용이하게 한다.

    • 단방향 데이터 바인딩으로 안정성이 보장된다. React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.

  • 단점

    • 앱의 규모가 커지면 속도가 느려진다.

    • View 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 하므로 javascript에 대한 지식이 필요하다.

    • 데이터 모델링, 라이팅, Ajax 등 기능 지원이 되지 않는다.

Vue

  • Vue란 ?

    • Vue(Vue.js, vju, view)는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.

    • 다른 자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다.

    • 이 프로젝트는 웹 UI 개발(컴포넌트, 선언형 UI, 핫 리로딩, 타임 트래블 디버깅 등)의 아이디어를 더 접근 가능하도록 만드는데 초점을 둔다. 덜 독선적이도록 시도하고 있기 때문에 개발자들이 익히기에 더 쉽다.

    • 한편 Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용가능하다.

  • 장점

    • 양방향 데이터 바인딩 방식을 이용한다. 즉, 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽을 변경하면 다른 한쪽도 자동으로 변경된다.

    • 컴포넌트기반 프레임워크로 가상 DOM 랜더링 방식을 사용한다. 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면이 갱신되므로 유지보수와 재사용성이 높다. HTML, CSS, JS만 알고 있어도 사용이 가능하여 배우기 쉽다.

  • 단점

    • 테스트가 어렵고 재 구조화가 쉽지 않다.
    • 모바일 지원이 부족하다.
    • 커뮤니티 등의 자료가 React에 비해 많지 않다.

  • 비교

    • React와 Vue의 공통점

      • 가상 DOM을 활용한다.
      • 반응적이고 조합 가능한 컴포넌트를 제공한다.
      • 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다.

    • React와 Vue의 차이점

      • React는 단방향 데이터 바인딩이고 Vue는 양방향 데이터 바인딩 방식을 이용한다.
      • 리액트는 JSX(JavaScript XML) 형태로 코드를 작성하는데 자바스크립트만을 사용해 UI 로직과 DOM을 구현한다.
      • Vue의 가상 DOM구현이 React보다 빠르며 오버 헤드가 적게 발생한다.
      • React에서 모든 컴포넌트는 JSX를 사용해 JSX의 툴을 이용해 Vue의 템플릿보다 진보된 기능을 사용할 수 있다.
      • Vue는 템플릿을 사용해 쉽고 빠르게 제작이 가능하며 진입장벽이 낮다.
      • 컴포넌트 분리와 재사용

        React의 가장 큰 장점 중 한가지는 컴포넌트의 생성 및 재사용이라고 생각한다. 파일별로 컴포넌트를 분리할 수 있으며, 새로운 함수형 컴포넌트를 생산하고, props 형태로 전달하거나 또는 다른 곳에서 재사용하는 것이 매우 용이하다.
        하지만 Vue는 새로운 컴포넌트를 만들어 분리하기 위해서 새로운 파일을 하나 더 만들고, 그에 따라 하나의 파일에 해당하는 template, script, style 모두 작성해주어야 한다. 뿐만 아니라 props를 전달하는 과정에서도 해당 컴포넌트를 사용하는 모든 파일을 오가며 작성해주어야 한다.

  • 정리

    • React는 확장성이 좋으나 자바스크립트 문법에 능숙해야하며 커스터마이징 및 자유도가 높은편이다. 또한 커뮤니티 형성이 잘 되어있고 큰 프로젝트에 용이하다.

    • Vue는 제공되는 html 기반의 템플릿이 있어 진입장벽이 낮고 프로젝트를 빠르게 만들 수 있다. 개발자간 코드가 통일성이 있으며 소규모 프로젝트에 용이하다. 사용 용도와 역량에 맞게 React나 Vue를 선택해서 사용하면 될 것 같다.

참고자료

profile
Logun
로건의 개발이야기

0개의 댓글