[SSAFYcial] Vue와 React는 어떻게 다른가요 ?

가장 먼저 생각나시는 Vue와 React의 차이점은 아마 .vue와 .jsx를 사용한다는 것일텐데요.

 

vue는 컴포넌트 정의 시에 .vue 파일을 생성하고, html과 css js를 모두 한 파일에 나누어 작성합니다.

예시를 들면 아래와 같죠.

 

<!-- HelloWorld.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

 

반면에 React의 경우 .jsx 파일을 사용해 컴포넌트를 정의합니다.

JS 코드 내에 HTML을 포함한 형태를 띄고 있습니다.

 

// HelloWorld.jsx
import React, { useState } from 'react';

const HelloWorld = () => {
  const [message, setMessage] = useState('Hello React!');

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default HelloWorld;

 

이러한 차이가 나타나는 이유는 무엇일까요 ?

---

다음의 두 문장을 통해 react와 vue를 직관적으로 비교해볼 수 있습니다.

 

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.

 

먼저, 리액트는 UI 라이브러리입니다. 라이브러리의 경우 참조가 쉽다는 특징이 있고, 이러한 특징 때문에 리액트에서는 자체적으로 전역 상태 관리, 라우팅 등을 지원하지 않습니다. 이러한 기능을 사용하기 위해서는 Redux나 Mobx와 같은 상태관리 라이브러리를 사용해주어야 합니다.

 

다음으로, Vue는 프로그레시브 프레임워크라고 소개하고 있습니다. 프로그레시브는 사용자가 필요에 따라 점차 기능을 추가, 확장할 수 있는 프레임워크로, 일반 프레임워크에 비해 유연성과 확장성이 큰 특징이 있습니다.

 

여기서 라이브러리와 프레임워크가 아직 헷갈리시는 분들을 위해 Chat GPT를 활용해서 두 도구에 대해 알아보겠습니다.

 

 

라이브러리가 뭐야, 프레임 워크와의 차이점은 ?

 

라이브러리

 

• 특정 기능을 수행하기 위해 필요한 코드를 모아놓은 모음
• 개발자가 필요한 기능을 제공하는 라이브러리를 호출해 자신의 어플리케이션에 통합한다.
• 특정 작업이나 문제를 해결하기 위해 설계되면, 사용자가 언제 어떻게 사용할지 선택할 수 있다.

 

프레임워크

 

• 애플리케이션의 구조를 제공하며, 특정 패턴에 따라 코드를 작성하도록 도움
• 전체적인 흐름을 관리하고 사용자가 프레임워크의 규칙과 패턴을 따르도록 강제한다.
• 애플리케이션의 전체적인 구조를 정의하고 개발자가 코드를 작성할 수 있는 뼈대를 제공한다.

 

결론적으로 보자면,

라이브러리는 사용자가 필요에 의해 직접 호출해서 사용하는 도구이며 그렇기 때문에 일부 기능만 사용 가능하고, 프레임워크에 비해 더 유연하다는 특정이 있습니다.
프레임워크의 경우, 정해진 구조에 따라 개발자가 규칙과 패턴을 따르며 코드를 작성해야 합니다. 때문에 유연성이 떨어지고, 구조와 패턴에 따른 제약이 발생할 수 있습니다.

 

위에서 언급했다시피 Vue의 경우 프레임워크보다는 유연성이 높은 프로그레시브 프레임워크이기 때문에 두 라이브러리 모두 유연성이 높다는 공통점이 있다고 볼 수 있습니다.

---

어떤 것을 사용해야 할까 ?

 

Vue로 프론트엔드를 개발하면 한가지 파일에 html과 css, js를 모두 포함하기 때문에 리액트에 비해 코드 가시성이나 생산성이 좋다고 여겨지기도 합니다.

 

그리고, Vue의 경우 코드가 직관적이고 React에 비해 자유도가 낮기 때문에 처음 프론트에 도전하시는 분들께는 vue를 추천드립니다.

 

하지만, 이러한 장점에도 불구하고 현업에서는 React도 많이 사용되고 있는데요.

 

그 이유 중 하나는 광범위한 커뮤니티와 생테계를 뽑을 수 있습니다.

 

React는 오랜시간 개발되고 유지보수되며, 널리 사용된 만큼 다양한 라이브러리와 도구들이 발전해왔습니다.

또한, React의 커뮤니티는 매우 크고 활발해 많은 오픈 소스 프로젝트와 학습 자료 등에 활용될 수 있습니다.

 

두번째로는 React의 성능이 있습니다.

React의 경우 Virtual DOM을 이용해 화면의 변화를 추적하고, 불필요한 갱신을 최소화할 수 있습니다.

---

이러한 장점을 가지고 있어 현업에서 많이 사용되고 있는 Vue와 React를 활용해서 프로젝트를 만들어보세요 !