프로젝트에서 Vue 쓸까? React 쓸까?

프로젝트에서 Vue 쓸까? React 쓸까? 

 

개발자의 취향 + 팀환경 + 프로젝트 성격에 따라 고를 수 있을듯하다.

 

빠르게 MVP 만들고 싶은 스타트업 / 프로토타입

• Vue
  • v-model, 템플릿 문법, ref() 만으로도 빠른 UI 구현 가능
  • 학습 부담이 적고 디자이너/퍼블리셔도 진입 장벽이 낮다
  • 작은 팀에서 생산성 우선이라면 효율적이다

 

대규모 팀, 복잡한 상태 관리, 모듈화, 협업 중요

• React
  • 단뱡향 데이터 흐름은 유지보수, 디버깅, 테스트에 최적화 되어있다.
  • 상태와 로직 분리가 깔끔하고 커스텀 훅 기반으로 확장성이 좋다.
  • Typescript + React + TanStack Query + Zustand/Redux 조합 = 실무에서 안정성, 구조화 조합에 좋다.

 

UI/UX 실험 위주, 애니메이션이 많은 앱 (디자이너 중심)

• Vue (or Svelte)
  • Vue는 HTML 기반의 템플릿으로 빠르게 UI를 바꾸기에 좋다.
  • 특히 Transition, watch, computed는 인터랙션 설계에 유리하다.

 

현실적인 기준

질문	Vue	React
학습 진입방벽이 낮은가?	O	△
빠르게 뭔가 만들고 싶는가?	O	△
타입 안정성과 구조화?	△	O
대규모 팀 협업?	△	O
에코시스템, 라이브러리 다양성? ㄴ 얼마나 많은 공식/비공식 도구, 오픈소스, 라이브러리 등 여	O	O+
나중에 Native 앱으로 확장하고 싶다?	△	React Native, Expo 등 강점

 

 

요약

• 소규모 사이드 프로젝트는 Vue3 (Composition API + <script setup>)
  • 꼭 소규모이기에 사용되는건 아님
• 협업 또는 규모 있는 프로젝트는 React + Typescript + TanStack Query

 

---

 

 

Q. 대기업 si에서도 Vue를 꽤 사용하는 것 같은데, 이게 소규모 프로젝트여서는 아닌것 같은데 뭐가 강점일까?

A. 특정 상황에서 실무적으로 효율이 좋기 때문 (SI 환경, 대기업 조직 구조, 유지보수 관점)

 

빠른 개발과 낮은 러닝커브

• HTML 기반 템플릿(가독성) 과 직관적인 API 제공 
• 디자이너, 퍼블리셔, 주니어 개발자도 빠르게 학습해서 진입 가능 
• SI 특성상 인력 교체나 협업이 잦은데 Vue는 신입도 바로 코드보고 이해 가능
• Vue는 누구나 와도 금방 적응하며 사용가능하다 -> 조직 내에 신뢰로 작용

 

공식 툴체인 정리 잘 되어 있음 (Vue ROuter, Pinaia, Vite 등)

• Vue는 Core 팀이 관리하는 공식 도구들이 많고, 버전 호환이나 통합성도 좋음
  • 정해진 구조 및 공식 문서만 봐도 개발 방향을 정할 수 있음
• SI 환경에서는 '검증된 도구만 사용해라'는 요구가 많은데, Vue는 이 점에서 안정적 선택 (구조화된 안정성 + 일관된 코드 베이스) 
  • React의 경우는 상태관리/라우팅 라이브러리 선택지가 많기때문에 오히려 갈등이 유발될 수 있음
  • 기업 내 가이드가 없을 경우 코드 스타일이 달라지거나 유지보수 어려움

 

유지 보수에 강하다 (선언형, 반응형 기반 구조)

• reactive, watch, computed, v-model 등을 잘 활용하면 상태 추적이 쉽다
• View와 상태의 연결이 직관적이어서, 기능 수정 시에도 어디가 영향을 받는지 찾기 쉽다
• '요구사항 변경'이 잦은 SI 프로젝트에서 장점

 

복잡하지 않아도 될 앱에 딱 적합

• 전형적인 SI 프로젝트는 CRUD 위주의 화면이며 폼, 리스트 + 필터 + 페이지네이션, 대시보드 스타일 레이아웃이 많다.
• 이 정도라면 오히려 React보다 개발 효율이 좋다

 

내부 디자인 시스템이나 컴포넌트 라이브러리 연동 쉬움

• Vuetify, Element Plus, Native UI 등 Vue용 UI 프레임워크가 많고 팀이 직접 공통 컴포넌트를 만들어도 템플릿으로 추상화하기 쉽다. -> 주니어도 일관된 UI 유지하면서 빠른 개발 가능하다.

 

기존 레거시 시스템과의 통합이 쉬움

• 점진적 도입이 쉽고 (CDN import부터 Vue CLI 까지 유연)
  • vue 팀이 미리 빌드해서 CDN에 올려둔 vue.global.js를 import하고 <script> 내에서 vue 문법으로 컴포넌트 작성 가능 (x.vue 파일을 직접 사용하여 도입하는 것 아님)
• 일부 모듈만 Vue로 전환하는 것도 가능 -> 기존 시스템 유지하며 점진적 개편 가능

 

요약

강점	설명
낮은 러닝커브	협업 인원 교체에도 빠른 적용
공식 도구 통합성	라우팅, 상태관리, 폼 처리까지 공식으로 해결 가능
상태 관리 직관성	양방향 바인딩, ref, computed 등으로 빠른 반영
유지보수 용이성	직관적인 구조 + 반응형 시스템
폼 + CRUD 중심 프로젝트에 최적	복잡한 설계 없이도 빠른 UI 완성 가능
점진적 도입 가능	기존 시스템과의 혼용, 전환 쉬움

 

작아서 쓰는게 아니라 조직 구조와 작업 방식에 잘 맞기 때문에 충분히 선택될 수 있다.

 

 

예시 1

SI 개발에서 Vue를 사용하는 이유 - React의 유연함이 단점으로 적용

React는 프레임워크가 아니라 라이브러리이기때문에 팀에 공식 스타일 가이드나 코드 컨벤션이 없으면 완전히 다른 스타일로 개발된 코드가 나올 수 있다.

아래에 같은 기능을 하는 컴포넌트이지만 스타일이 극명하게 다른 예시 2가지를 화인해보겠다.

 

예시 A: 함수형 + 훅 + 최신 스타일 (모던 React)

함수형 컴포넌트, Hooks 사용 (useState), JSX + 최신 문법, 짧고 선언적이며 읽기 쉽다.

// Counter.tsx (모던 스타일)
import { useState } from 'react';

export default function Counter() {
	const [count, setCount] = useState(0);
    
    return (
		<button onClick={() => setCount((c)=> c + 1)}>
        	Count: {count}
        </button>
    );
}

 

 

예시 B: 클래스형 컴포넌트 + bind 사용 (구형 스타일) - 거의 안쓰지만 참고

클래스형 컴포넌트, 전통적인 bind 스타일, 상태도 this.state, 메서드도 this.handleClick, 구조도 길고 읽기 어렵다,

// Counter.js (클래스 기반 + 전통 스타일)
import React from 'react';

class Counter extends React.component {
	constructor(props) {
    	super(props);
        this.state = { count: 0 };
        this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick() {
    	this.setState((prev) => ({ count: prev.count + 1 });
    }
    
    render() {
    	return (
        	<button onClick={this.handleClick}>
            	Count: {this.state.count}
            </button>
        )
    }
}

export default Counter;

 

 

예시 2

input에 키워드를 입력하면 리스트 중 해당 키워드를 포함한 항목만 필터링해서 출력

 

예시 A: 선언형 + 모던 React 스타일

export default function FilterList(){
	const [query, setQuery] = useState('');
    const items = ['apple', 'banana', 'grape', 'orange'];
    
    const filtered = items.filter((item) => item.includes(query.toLowerCase()));
    
    return (
    	<div>
        	<input value={query} onChange={(e) => setQuery(e.target.value)}
        	<ul>
            	{filtered.map((item) => (
                	<li key={item}>{item}</li>
                ))}
            </ul>
        </div>
    )
}

 

 

예시 B: 로직 분리 + impertive 스타일 + useEffect 남용

export default function FilterListImperative(){
	const [query, setQuery] = useState('');
    const [filtered, setFiltered] = useState([]);
    const items = ['apple', 'banana', 'grape', 'orange'];
    
    useEffect(() => {
    	const result = items.filter((item) => item.includes(query.toLowerCase()));
        setFiltered(result);
    }, [query]);
    
    retuen (
    	<div>
        	<input value={query} onChange={(e) => setQuery(e.target.value)} />
            <ul>
            	{filtered.map((item) => (
                	<li key={item}>{item}</li>
                ))}
            </ul>
        </div>
    )
}

 

React는 모두 함수형 컴포넌트를 쓴다고해도 사람마다 상태처리나 렌더링 방식을 다르게 구현할 수 있다.

따라서 팀내 가이드가 없을 경우 코드 일관성을 해칠 수 있다.

 

 

 

---

 

 

Q. Vue가 점진적 도입이 장점이라고 했는데, 그럼 React는 점진적 도입이 안되는건가?

A. React도 점진적 도입이 '가능하긴 하다'

Vue에 비해서 조금 더 어렵고 복잡한 편이다.

 

React는 SPA로만 쓰는게 아니고 기존 서버 렌더링 기반안에 React 위젯처럼 일부 삽입할 수 있다.

일부 영역만 React로 마운트하는게 가능하다.

<div id="react-widget"></div>

<script>
	ReactDOM.rendeR(<MyComponent />, document.getElementById('react-widget'));
</script>

 

 

Vue보다 어려운 이유는

1. React는 템플릿이 아닌 JS 코드 자체가 중심이라 삽입에 구조적 제약이 많다.
   • Vue는 HTML 템플릿 기반이라 HTML위에 Vue 붙이기 쉽다.
   • React는 JSX + 컴포넌트 체계라 기존 마크업과 덜 자연스럽게 맛물린다.
2. React는 상태 관리나 컴포넌트 구조가 통째로 SPA 스타일을 가진다.
   • useState, useEffect, context, router 등 모두 JS 기반 구조 중심
   • Vue는 반응형 시스템이 전역이 아니어도 쓸 수 있지만, React는 컴포넌트 안에서 Hook 없이 사용 불가
3. React의 라우팅, 상태 관리 등은 전부 서드파티
   • Vue는 vue-router, pinia 같은 공식 생태계가 있어서 연동이 쉽다.
   • React는 선택지가 많아서 기존 시스템과 연결시 더 많은 고민이 필요

 

그럼에도 React 점진 도입을 실무에서 사용하는 경우는 있다.

SPA 전체로 만들지 않아도 React는 사용 가능하다.

케이스	예시
기존 프로젝트에 컴포넌트 단위 도입	한 페이지만 React로 전환
Django, Rails, Spring + React 혼용	Django가 전체 뼈대, React가 일부 페이지
마이크로 프런트엔드	앱 일부를 React로 쪼개고 점진 도입

 

 

React도 점진적 도입은 가능하지만, Vue에 비하면 약간의 설계와 준비가 더 필요하다.

 

 

---