[Vue.js] 옵션(Options) 방식: 데이터 변경에 따른 리렌더링 완벽 가이드

Vue.js 옵션(Options) 방식: 데이터 변경에 따른 리렌더링 완벽 가이드

React.js에서 useState가 데이터 변경을 감지하고 컴포넌트를 리렌더링하는 핵심적인 역할을 하는 것처럼, Vue.js의 옵션(Options) 방식은 컴포넌트의 특정 옵션들을 통해 이러한 반응형 시스템을 관리하는 것이 특징이다. 이는 개발자가 직접 DOM을 조작하지 않아도 데이터 변경에 따라 UI가 자동으로 업데이트되도록 하는 Vue.js의 강력한 기능이다.

---

1. data(): 컴포넌트의 핵심 반응형 상태이다.

data() 옵션은 컴포넌트의 반응형 상태를 선언하는 가장 기본적인 방법이다. 이 옵션은 함수 형태로 정의되며, 이 함수가 반환하는 객체 내부의 모든 속성들은 Vue의 반응형 시스템에 의해 면밀히 추적되는 것이 특징이다.

• 데이터 선언: 컴포넌트의 data 옵션 안에 객체 형태로 초기 상태를 정의하는 것이 일반적이다. 예를 들어, 다음과 같이 count와 message를 선언할 수 있다.

  export default {
    data() {
      return {
        count: 0,
        message: 'Hello Vue!'
      };
    }
  };

• 값 접근 및 변경: 템플릿에서는 {{ count }}와 같이 변수 이름으로 직접 접근할 수 있다. 스크립트 내부에서는 this.count++처럼 this 키워드를 사용하여 값에 접근하고 변경하는 것이 특징이다.
• 리렌더링의 트리거: data에 정의된 속성 값이 변경되면, Vue는 이를 감지하고 해당 값을 사용하는 템플릿 부분을 자동으로 업데이트하여 컴포넌트가 리렌더링되는 것이다.

---

2. computed(): 종속성에 따라 동적으로 계산되는 값이다.

computed() 옵션은 data에 있는 반응형 데이터를 기반으로 계산된 값을 정의할 때 사용되는 것이다. 이 값은 종속된 반응형 데이터가 변경될 때만 다시 계산되는 것이 가장 큰 특징이다.

• 계산된 속성 정의: computed 옵션 안에 객체 형태로 계산된 속성을 정의한다. 예를 들어, firstName과 lastName을 합쳐 fullName을 만드는 것이 가능하다.

  export default {
    data() {
      return {
        firstName: 'John',
        lastName: 'Doe'
      };
    },
    computed: {
      fullName() {
        return `${this.firstName} ${this.lastName}`;
      }
    }
  };

• 성능상의 이점: computed 속성은 캐싱 기능이 내장되어 있어, 종속된 데이터가 변하지 않는 한 여러 번 접근해도 계산을 다시 하지 않아 성능상 이점이 큰 것이 특징이다. fullName은 firstName이나 lastName 중 하나라도 변하면 다시 계산되고, 이를 사용하는 컴포넌트가 리렌더링되는 것이다.

---

3. methods(): 컴포넌트 내에서 호출 가능한 함수들의 집합이다.

methods() 옵션은 컴포넌트 내에서 호출할 수 있는 함수들을 정의하는 곳이다. 이 함수들은 주로 데이터(data)를 변경하거나, 특정 비즈니스 로직을 수행하는 데 사용되는 것이다.

• 함수 정의: methods 옵션 안에 객체 형태로 함수들을 정의한다. 예를 들어, count 값을 증가시키는 increment 함수를 정의하는 것이 일반적이다.

  export default {
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++; // data 속성 변경
      }
    }
  };

• 리렌더링 유발: methods 안에서 data 속성을 변경하면, Vue의 반응형 시스템에 의해 변경이 감지되어 관련 컴포넌트가 자동으로 리렌더링되는 것이다.

---

4. watch(): 특정 데이터 변경을 주시하고 반응하는 감시자이다.

watch() 옵션은 특정 반응형 데이터의 변경을 '주시'하고, 해당 데이터가 변경될 때 특정 로직을 수행할 수 있도록 하는 기능이다. 이는 React의 useEffect 중 특정 상태 변화에 반응하는 부분과 유사한 역할을 하는 것이다.

• 데이터 감시: watch 옵션 안에 객체 형태로 주시할 속성과 콜백 함수를 정의한다. question 데이터가 변경될 때마다 특정 메시지를 콘솔에 출력하는 예시이다.

  export default {
    data() {
      return {
        question: ''
      };
    },
    watch: {
      question(newQuestion, oldQuestion) {
        // question 데이터가 변경될 때마다 이 로직이 실행된다.
        console.log(`질문이 '${oldQuestion}'에서 '${newQuestion}'으로 변경되었습니다.`);
        // API 호출 등 비동기 작업 수행 가능
      }
    }
  };

• 활용성: watch는 주로 데이터 변경에 따른 비동기 작업(API 호출 등)이나, 복잡한 로직을 수행할 때 유용하게 활용되는 것이다.

---

Vue.js의 옵션 방식은 각 기능(데이터, 계산된 속성, 메서드, 감시자)이 명확하게 구분되어 있어, 코드를 구조화하고 이해하기 쉽다는 장점이 있다. Vue.js를 시작하는 개발자에게는 이러한 옵션 방식의 이해가 필수적이다.