Vue3

지금 진행하고 있는 프로젝트의 프론트 부분은 vue3를 사용하고 있다.

 

이번 기회에 처음 접하게 돼서 공부하고 배워가면서 하고 있다.

 

 

 

Vue2 / Vue3

 

지금은 Vu3가 가장 최신 릴리즈라고 한다.

 

Vue2에서는 Options API 방식으로 data, methods, computed, watch 등으로 나눠서 컴포넌트를 구성했지만

Vue3에서는 Composition API라는 새로운 방식이 도입되어서 로직을 기능 단위로 묶어서 관리할 수 있게 됐다.

 

나는 바로 Vue3로 시작해서 잘 몰랐지만 프로젝트 파일들을 보면 기능별로 컴포넌트들이 세세하게 쪼개져있어서 재사용하기 매우 편했고 기능별로 나눠져 있었기 때문에 구조 파악이 비교적 쉬웠다.

 

또 다른 장점으로는 컴포넌트들의 로직 분리를 쉽게 할 수 있고, 재사용성이 높고, TypeScript와 잘 맞고, 내부 반응형 시스템이 Proxy 기반으로 개선되어 성능이 향상(초기 렌더링 속도 약 55% 향상)되고, 메모리 사용량도 감소하고 등등등 장점이 많이 추가되었다.

 

Vue를 검색해보면 React랑 비교하는 글들이 많았는데

가상 DOM을 사용하고, 컴포넌트 기반 구조, 선언형 UI, 상태(state)가 바뀌면 UI가 반응, SPA, 상태 관리, Router, TS와의 연계 등등 많은 공통점들이 있었다.

그래도 가장 많이 보이는건 아무래도 React보다 쉬운 Vue문법이었다.

 

---

 

React vs Vue

 

✅ 컴포넌트 구조

🔷React (JSX 사용)

import React from 'react';

function Hello() {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  );
}

export default Hello;

 

🔶 Vue

<template>
  <div>
    <h1>Hello Vue</h1>
  </div>
</template>

<script>
export default {
  name: 'Hello'
}
</script>

 

React는 JSX를 사용해서 JS 안에 HTML을 넣지만

Vue는 Template을 사용해서 HTML안에 JS를 표현한다.

 

---

 

 

✅ 상태 관리 (useState vs ref/data)

🔷 React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 상태 선언

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

 

 

🔶 Vue (Composition API)

<script setup>
import { ref } from 'vue';

const count = ref(0); // 상태 선언
const increment = () => count.value++;
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

 

React는 useState로 상태를 정의하지만

Vue는 ref()로 반응형 변수를 정의하고 .value로 접근한다.

 

---

 

✅ 3. 이벤트 핸들링

🔷 React

<button onClick={handleClick}>클릭</button>

 

 

🔶 Vue

<button @click="handleClick">클릭</button>

 

React는 onClick={} 형태지만

Vue는 @click="함수명" 또는 v-on:click="함수명" 으로 처리한다.

 

 

---

 

 

✅ 4. 조건 렌더링

🔷 React

{isLoggedIn ? <p>환영합니다</p> : <p>로그인해주세요</p>}

 

 

🔶 Vue

<p v-if="isLoggedIn">환영합니다</p>
<p v-else>로그인해주세요</p>

 

React는 조건문 달때 삼항연산자를 사용하지만

Vue는 간단하게 v-if, v-else로 끝낼 수 있다.

조금 더 살펴보면

 

조건에 따라 랜더링을 하는 UI를 만들어야 할 때

React는 &&, 삼항연산자, 함수 방법이 있는데

// 방법 1 : &&
return(
  	//...
	{isOpen && <Modal />}
  )

// 방법 2 : 삼항 연산자
return(
  	//...
	{isOpen ? <Modal /> : null}
  )

// 방법 3 : 함수로 대체
const modal = () => {
  if(isOpen){
    return <Modal />
  }
}

return (
	//...
    {modal()}
)

 

 

Vue는 v-if로 끝

<Modal v-if="isOpen"/>

 

 

 

---

✅ 5. 리스트 렌더링 (map vs v-for)

🔷 React

<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

 

🔶 Vue

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

 

React는 map() 사용

Vue는 v-for 사용

 

---

 

✅ 6. 양방향 바인딩 (React는 직접 처리, Vue는 v-model)

🔷 React

<input value={name} onChange={(e) => setName(e.target.value)} />

 

🔶 Vue

<input v-model="name" />

 

React는 value와 onChange 직접 연결(기본적으로 단방향 데이터 흐름)

Vue는 v-model 하나로 자동 양방향 바인딩

 

양방향 바인딩은 프론트 개발시 화면(UI)와 데이터(Model)가 서로 영향을 주고받는 동기화 방식이다.

입력값을 변경하면 데이터도 바뀌고, 데이터가 바뀌면 화면도 자동으로 반영되는 방식이라고 한다.

 

---

 

✅ 7. props 전달

🔷 React

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

 

 

🔶 Vue

<template>
  <h1>Hello, {{ name }}</h1>
</template>

<script>
export default {
  props: ['name']
}
</script>

 

React는 함수 매개변수에서 props 구조 분해

Vue는 props 배열 또는 객체로 정의

 

---

 

 

등등 문법이 대체적으로 쉬웠다.

물론 실제 프로젝트를 진행하면서 단순히 '문법이 쉽다'라는 말로는 해결이 되지 않는 상황이 훨씬 많지만.. 그래도 이해하기 쉬운 느낌이여서 접근하기 편했다.

 

React도 좋지만 Vue만의 매력이 있기 때문에 Vue 공부를 더 열심히 해봐야겠다!!