React vs Vue 비교 정리

김덕진·2025년 6월 7일

React vue

React

목록 보기

3/13

🧠 React vs Vue: 상태 변경 감지 방식 총정리

React와 Vue는 상태를 감지하는 방식에서 철학부터 접근 방식까지 확연히 다릅니다. 어떤 상황에서 어떤 프레임워크가 더 적합한지, 실제 사용 시 고려할 핵심 차이들을 정리해보았습니다.

✅ 1. React: 얕은 비교(Shallow Compare) 기반 상태 감지

핵심 요약: React는 상태 객체의 참조값만 비교합니다.

const obj1 = { count: 1 };
const obj2 = { count: 1 };

console.log(obj1 === obj2); // false (참조값이 다름)

상태가 바뀌었다는 것은 '참조값이 바뀌었는가?'로 판단됩니다.

📦 장점 박스

상태 변경 여부 판단이 단순합니다.
큰 객체 구조에서도 비교 연산이 빠릅니다.

⚠️ 주의점

내부 값이 바뀌어도 참조값이 같으면 변경으로 인식되지 않습니다.
불변성 유지가 필수입니다. 직접 객체를 mutate하면 React가 감지하지 못합니다.

// 잘못된 예시
const [state, setState] = useState({ count: 0 });

const handleClick = () => {
  state.count += 1;
  setState(state); // ❌ 참조값 동일 → 리렌더링 안 됨
};

// 올바른 방식
const handleClick = () => {
  setState(prev => ({ ...prev, count: prev.count + 1 }));
};

✅ 2. Vue: Proxy 기반의 깊은 감지(Deep Reactivity)

핵심 요약: Vue는 Proxy로 객체를 감싸 속성 단위로 변경을 추적합니다.

const obj = { count: 0 };
const reactiveObj = new Proxy(obj, {
  set(target, key, value) {
    console.log(`${key} changed!`);
    target[key] = value;
    return true;
  }
});

reactiveObj.count = 1; // → "count changed!" 출력

값 단위로 변경을 감지하므로 세밀한 상태 추적이 가능합니다.

📦 장점 박스

상태가 복잡할수록 자동 추적이 편리합니다.
부분 상태 업데이트에 유리합니다.

⚠️ 주의점

구조가 깊거나 배열이 커질수록 오버헤드가 커질 수 있습니다.
Vue의 반응형은 내부적으로 자동화되어 있어 디버깅이 어려운 경우도 있습니다.

⚖️ 3. React vs Vue 상태 감지 방식 비교 요약

기능	React (얕은 비교)	Vue (Proxy 기반 감지)
변경 감지 기준	참조값	값 자체
성능 특성	데이터 크기 무관, 빠름	세밀하지만 느릴 수 있음
코드 작성 스타일	불변성 유지 필요	직접 변경 가능
복잡 상태 대응	수동으로 관리	자동으로 반응

🚀 4. React가 더 유리한 상황

대규모 상태 처리
단순한 상태 변경 흐름
컴포넌트 트리 규모가 클 때

setData(prev => ({ ...prev, count: prev.count + 1 }));

⚠️ 주의점

상태를 새 객체로 교체해야 리렌더링이 발생합니다.
얕은 비교는 빠르지만, 너무 잦은 객체 복사나 구조 분해는 오히려 비용이 될 수 있습니다.

🌿 5. Vue가 더 유리한 상황

소규모 앱 또는 로직이 단순한 컴포넌트
부분 상태 변경이 많은 앱

state.user.name = 'Eundeok'; // 자동으로 반응형 처리됨

⚠️ 주의점

깊은 구조의 상태나 대규모 배열에서는 Proxy 감지 비용이 증가합니다.
Vue 2에서는 배열 인덱스 변경 등의 감지 제약이 있었지만, Vue 3에서는 대부분 해소되었습니다.

🧾 6. React와 Vue의 상태 관리 철학 차이

특성	React	Vue
상태 관리 철학	불변성(immutability)	반응형(reactivity)
상태 변경 방식	새 객체 생성 (직접 수정 ❌)	직접 수정 가능
변경 감지 기준	참조값 (shallow compare)	Proxy로 속성 추적
유연성	수동 관리, 정교한 제어	자동 관리, 직관적