0Pricing
Frontend Academy · 강의

Options API: data, methods, computed

반응형 데이터를 정의하고 템플릿에서 호출할 methods를 작성하며, 자동으로 업데이트되는 파생 값을 위해 computed 속성을 사용합니다.

Options API: data, methods, computed은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

옵션 API란 무엇인가요

옵션 API는 옵션 유형별로 컴포넌트 로직을 구성합니다. 데이터(반응형 상태), 메서드(함수), 계산 속성(파생 상태), 감시(부수 효과), 수명 주기 훅으로 나눕니다. 각각 이름이 지정된 객체 속성에 작성합니다.

데이터 옵션

반응형 속성으로 이루어진 객체를 반환합니다. data()에 선언된 모든 속성은 반응형입니다. Vue가 이를 감지하고 속성이 변경되면 템플릿을 다시 렌더링합니다.

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0,
      user: null as User | null,
    };
  }
}

메서드 옵션

템플릿이나 다른 메서드에서 호출할 수 있는 함수입니다. 메서드 안에서 this는 컴포넌트 인스턴스를 가리키며 데이터와 계산 속성에 접근할 수 있게 합니다.

export default {
  data() { return { count: 0 }; },
  methods: {
    increment() {
      this.count++; // 'this' is the component instance
    },
    decrement() {
      this.count--;
    }
  }
}

계산 속성 옵션

계산 속성은 반응형 데이터에서 값을 파생합니다. 계산 결과는 캐시되므로 종속성이 변경될 때만 다시 계산됩니다. 불필요한 재계산을 피하려면 파생 값에는 메서드 대신 계산 속성을 사용합니다.

export default {
  data() {
    return { items: [], tax: 0.2 };
  },
  computed: {
    itemCount() { return this.items.length; },
    subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
    total() { return this.subtotal * (1 + this.tax); } // uses another computed
  }
}

쓰기 가능한 계산 속성

계산 속성에 가져오기와 설정 기능을 지정하면 쓰기 가능하게 만들 수 있습니다. 이는 v-model을 사용하는 양방향 바인딩에 유용합니다.

computed: {
  fullName: {
    get() { return `${this.firstName} ${this.lastName}`; },
    set(value: string) {
      [this.firstName, this.lastName] = value.split(' ');
    }
  }
}

감시 옵션

감시자는 반응형 속성이 변경될 때 부수 효과를 실행합니다. 데이터 변경으로 시작되는 비동기 작업(검색어가 바뀔 때 데이터를 가져오는 작업 등)에 사용합니다.

watch: {
  searchTerm(newVal: string) {
    this.fetchResults(newVal);
  },
  // Deep watch for objects:
  settings: {
    handler(val) { this.saveSettings(val); },
    deep: true
  }
}

옵션 API의 수명 주기 훅

수명 주기 훅은 메서드로 선언합니다: created, mounted, updated, unmounted. created는 DOM이 준비되기 전에 실행됩니다. mounted는 컴포넌트가 DOM에 추가된 후 실행됩니다.

export default {
  mounted() {
    this.fetchData(); // runs after component is in the DOM
    this.timer = setInterval(this.tick, 1000);
  },
  unmounted() {
    clearInterval(this.timer); // cleanup
  }
}

템플릿 접근: 참조

템플릿 요소에 ref 속성을 추가하면 메서드에서 this.$refs.name을 통해 DOM 요소나 자식 컴포넌트에 접근할 수 있습니다. 마운트된 후에 사용할 수 있습니다.

<input ref="emailInput" type="email">

// In mounted():
this.$refs.emailInput.focus();

믹스인과 컴포지션 API

옵션 API에는 컴포넌트 간에 로직을 공유하기 위한 믹스인이 있습니다. 컴포지션 API에서는 믹스인 대신 컴포저블을 주로 사용합니다. 믹스인은 로직을 추적하기 어렵고 이름 공간 충돌 문제가 있기 때문입니다. 새 코드에는 컴포지션 API를 우선 사용합니다.

옵션 API와 컴포지션 API

옵션 API는 소규모에서 중간 규모의 컴포넌트에 적합하고 초보자가 배우기 쉽습니다. 컴포지션 API(