Vue 학습

5장. 컴포지션 API

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

이전 장에서는 클래식 옵션 API를 사용하여 Vue 컴포넌트를 작성하는 방법을 배웠습니다. Options API는 Vue 2 이후 가장 많이 사용되는 컴포넌트 컴포넌트 작성 API이지만, Options API를 사용하면 불필요한 코드 복잡성, 큰 컴포넌트 코드의 가독성, 컴포넌트 간의 로직 재사용성 문제가 발생할 수 있습니다. 이러한 사용 사례를 위해 이 장에서는 Vue 컴포넌트를 작성하는 대안적인 접근 방식인 컴포지션 API를 소개합니다.

이 장에서는 Vue에서 기능적인 상태 저장소 요소를 생성하기 위한 다양한 컴포지션 훅을 살펴봅니다. 또한 더 나은 반응형 제어를 위해 옵션 API와 컴포지션 API를 결합하고 애플리케이션에 재사용 가능한 컴포지션을 직접 작성하는 방법도 배웁니다.

컴포지션 API로 컴포넌트 설정하기

Options API를 사용하여 컴포넌트를 작성하는 것은 Vue에서 일반적인 관행입니다. 그러나 많은 경우 믹스인에서와 같이 데이터와 메서드가 겹치는 것을 걱정하지 않고 컴포넌트 로직의 일부를 재사용하고 싶거나¹이나 더 읽기 쉽고 정리된 컴포넌트를 원할 때가 있습니다. 이러한 시나리오에서는 컴포지션 API가 도움이 될 수 있습니다 .

Vue 3.0에 도입된 Composition API는 setup() 훅("설정") 또는 <script setup> 태그를 사용하여 상태 저장 및 반응형 컴포넌트를 작성할 수 있는 대체 방법을 제공합니다. setup() 훅은 컴포넌트 옵션 객체의 일부이며 컴포넌트 인스턴스를 초기화 및 생성하기 전에 한 번 실행됩니다( beforeCreate() 훅 이전).

이 훅 또는 이와 동등한 구문 <script setup> 태그 내에서만 컴포지션 API 함수 또는 컴포저블("재사용 가능한 컴포저블 만들기")을 사용할 수 있습니다. 이 조합은 상태 저장 기능 컴포넌트를 생성하고 컴포넌트의 반응 상태와 메서드를 정의하고 다른 라이프사이클 훅을 초기화할 수 있는 훌륭한 장소를 제공하며( "라이프사이클 훅 사용하기" 참조) 보다 직관적인 코드 가독성을 제공합니다.

컴포넌트의 반응형 데이터를 처리하는 ref() 및 reactive() 함수부터 시작하여 컴포지션 API의 강력한 기능을 살펴보겠습니다.

ref() 및 reactive()로 데이터 처리하기

2장에서 컴포넌트의 데이터를 초기화하기 위한 옵션 API의 data() 함수 프로퍼티에 대해 배웠습니다("데이터 프로퍼티로 로컬 상태 만들기"). data() 에서 반환된 객체의 모든 데이터 프로퍼티는 반응형이므로 Vue 엔진이 선언된 각 데이터 프로퍼티의 변경 사항을 자동으로 감시합니다. 그러나 이 기본 기능은 대부분 정적인 데이터 속성이 많은 경우 컴포넌트에 오버헤드를 유발할 수 있습니다. 이러한 경우에도 Vue 엔진은 불필요한 정적 값에 대한 감시 기능을 계속 활성화합니다. 과도한 데이터 와처의 수를 ...