Vue

주제 선정 이유

프론트엔드 개발을 진행하면서 Vue를 사용해 화면을 구성하고 상태를 관리하는 데에는 점점 익숙해졌지만, 실제로
문법과 사용 방법에 집중한 채 내부에서 어떤 방식으로 동작하는지에 대해서는 깊이 고민해본 적이 많지 않았는데 특히 데이터가 변경되었을 때 화면이 자동으로 업데이트되는 과정이나, 컴포넌트가 렌더링되는 흐름이 자연스럽게
느껴졌지만 이를 명확하게 설명하기는 어려웠고, 이러한 동작이 내부적으로 어떻게 이루어지는지에 대한 궁금증이
생기게 되었습니다.

그래서 이번 글에서는 Vue의 핵심 개념인 반응형 시스템과 렌더링 흐름을 중심으로, 데이터 변경부터 화면
업데이트까지 이어지는 전체 동작 과정을 정리해보고자 합니다.

Vue가 뭘까?

Vue는 사용자 인터페이스를 구축하기 위한 프론트엔드 프레임워크로, 데이터의 변화에 따라 화면을 자동으로
업데이트하는 데이터 중심 구조를 가지고 있는데 개발자는 DOM을 직접 조작하기보다 상태를 관리하는 데 집중합니다.

즉, Vue는 데이터와 화면을 자연스럽게 연결해주어 복잡한 UI를 보다 직관적이고 효율적으로 개발할 수 있도록
도와주는 도구입니다.

Vue와 React의 차이

Vue와 React는 모두 컴포넌트 기반 UI를 구성하는 기술이지만, 구조와 사용 방식에서 차이가 있습니다.

구분	Vue	React
성격	프레임워크	라이브러리
구조	주요 기능 통합 제공	필요한 기능을 선택하여 조합
UI 작성 방식	HTML 기반 템플릿	JSX
상태 관리	반응형 시스템 기반 자동 추적	상태 변경 시 Virtual DOM diffing
진입 난이도	비교적 쉬움	상대적으로 자유도 높음
생태계	공식 구조 중심	다양한 외부 라이브러리 활용

Vue는 상태 관리, 템플릿, 라우팅 등 애플리케이션을 구성하는 데 필요한 기능들을 하나의 구조 안에서 통합적으로
제공하여 전체적인 흐름을 주도하는 반면, React는 UI를 구성하기 위한 라이브러리로서 필요한 기능들을 개발자가
직접 선택하여 조합하는 방식을 취하기 때문에 프레임워크처럼 활용되는 경우도 많습니다.

반응형 시스템

Vue의 가장 핵심적인 특징은 데이터의 변화를 감지하고 자동으로 화면을 업데이트하는 반응형 시스템인데 일반적으로 JavaScript에서 데이터를 변경하더라도 DOM은 자동으로 바뀌지 않기 때문에 직접 DOM을 조작해야 하지만 Vue는
상태가 변경되면 이를 감지하여 관련된 부분만 자동으로 다시 렌더링합니다.

const count = ref(0);

count.value++;

이처럼 단순히 값을 변경하는 것만으로도, Vue는 해당 데이터를 사용하고 있는 UI를 자동으로 업데이트합니다.

Proxy

Vue는 데이터를 Proxy로 감싸서 변경을 감지하는데 객체에 접근하거나 값을 수정할 때 내부적으로 이를 가로채서
어떤 데이터가 사용되었고, 어떤 데이터가 변경되었는지를 추적합니다.

이 과정은 크게 두 가지로 나눌 수 있습니다.

• track
  • 데이터가 사용될 때 추적
• trigger
  • 데이터가 변경될 때 실행

예를 들어 어떤 값이 화면에 사용되고 있다면, Vue는 해당 값을 track하고 있다가 값이 변경되면 trigger를 통해
그 값을 사용하는 부분만 다시 렌더링합니다.

렌더링 흐름

Vue는 데이터 변경이 발생하면 다음과 같은 흐름으로 화면을 업데이트합니다.

State 변화 → 반응형 시스템 감지 → Virtual DOM 생성 → 이전 Virtual DOM과 비교 → 실제 DOM 업데이트

이 과정에서 Vue는 전체 DOM을 다시 그리는 것이 아니라, 변경된 부분만 찾아서 업데이트하고 특히 Virtual DOM을
활용하여 이전 상태와 변경된 상태를 비교하고, 실제 DOM에는 최소한의 변경만 적용하기 때문에 성능적으로도
효율적인 렌더링이 가능합니다.

Options API & Composition API

Vue는 컴포넌트를 작성하는 방식으로 크게 두 가지 스타일을 제공합니다.

• Options API
• Composition API

두 방식은 같은 기능을 구현할 수 있지만, 코드 구조와 관리 방식에서 차이가 있습니다.

Options API

Vue 초기부터 사용된 방식으로, data, methods, computed 등 기능별 코드를 분리하여 작성합니다.

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increase() {
      this.count++;
    }
  }
}

이 방식은 구조가 명확하고 직관적이기 때문에 초기 학습이나 간단한 프로젝트에서 이해하기 쉽다는 장점이 있지만
기능이 많아질수록 관련 로직이 여러 옵션에 분산되어 관리가 어려워질 수 있습니다.

Composition API

기능 단위로 코드를 묶어서 작성하는 방식입니다.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increase = () => {
      count.value++;
    };

    return { count, increase };
  }
}

이 방식은 관련된 상태와 로직을 하나의 흐름으로 묶을 수 있어 코드 재사용성과 유지보수성이 높다는 장점이 있고 특히 프로젝트 규모가 커질수록 장점이 더 잘 드러납니다.

추천

상황	추천 방식
작은 규모 / 학습 단계	Options API
중대형 프로젝트 / 구조 설계	Composition API

현재는 Composition API가 Vue 3의 기본 스타일로 자리 잡고 있습니다.

그래서 어떻게 쓰라고?

Vue는 정해진 하나의 방식만을 강제하기보다는 상황에 맞게 유연하게 사용할 수 있는 구조를 가지고 있습니다.

• 기본적인 흐름은 상태를 중심으로 설계한다
• DOM을 직접 조작하기보다 상태 변경으로 UI를 제어한다
• 컴포넌트는 작게 나누고 재사용 가능하게 구성한다

또한 컴포넌트 작성 방식에서는 다음과 같이 선택하면 됩니다.

• 간단한 화면 / 빠른 구현 → Options API
• 재사용성 / 유지보수 / 확장성 → Composition API

특히 프로젝트 규모가 커질수록 상태와 로직을 함께 묶어 관리할 수 있는 Composition API가 훨씬 유리하기 때문에,
현재 기준에서는 Composition API를 중심으로 사용하는 것이 가장 일반적인 선택이며 단순히 문법을 사용하는 것이
아니라 데이터의 흐름을 어떻게 설계하고, 그 흐름을 기반으로 UI를 구성할 것인지가 핵심인것 같습니다.

마무리

Vue를 정리하면서 느낀 핵심을 다시 정리해보면 다음과 같습니다.

1. Vue는 데이터의 변화를 감지하고 자동으로 화면을 업데이트하는 반응형 시스템을 기반으로 동작합니다.
2. Proxy를 활용한 track과 trigger 과정을 통해 어떤 데이터가 변경되었는지를 추적하고 필요한 부분만
   효율적으로 렌더링합니다.
3. Virtual DOM을 사용하여 변경된 부분만 실제 DOM에 반영함으로써 성능을 최적화합니다.
4. Options API와 Composition API를 통해 다양한 방식으로 컴포넌트를 구성할 수 있으며, 특히
   Composition API는 확장성과 유지보수 측면에서 유리합니다.