vue: Composition API 간략설명

Vue 3의 Composition API에 대해 자세히 들어가기전 간략히 소개합니다.

Vue composition 세상 with chatGPT

 

Composition API는 코드의 재사용성과 가독성을 높이기 위해 새롭게 도입된 기능입니다. 기존의 Option API와 다르게, Composition API에서는 코드의 로직과 상태 관리 등을 함수 단위로 분리하여 더 모듈화된 구조로 만들 수 있습니다. 이를 통해 컴포넌트의 복잡도가 높아질 때 로직을 더 유연하게 관리할 수 있습니다.

 

Composition API의 주요기능

 

1. setup함수 : Composition API는 setup 함수에서 대부분의 로직을 정의합니다. setup은 컴포넌트가 생성될 때 한 번 호출되며, 이 안에서 상태 변수, 반응형 데이터, 그리고 여러 기능을 정의할 수 있습니다.

 

2. 반응형 상태 관리 (ref 와 rective):

• ref: 단일 변수 값을 반응형 데이터로 만들 때 사용합니다. 예를 들어, 숫자나 문자열 같은 단일 데이터를 사용할 때 유용합니다.
• reactive: 객체 또는 배열을 반응형으로 만들 때 사용합니다. 이를 통해 복잡한 데이터 구조를 더 쉽게 관리할 수 있습니다.

3.  컴포저블 함수: Composition API의 가장 큰 장접 중 하나는 컴포저블 함수를 사용해 재사용 가능한 로직을 만들어낼 수 있다는 것입니다. 예를 들어, API 호출 로직을 별도의 함수로 분리하여 여러 컴포넌트에서 쉽게 재사용할 수 있습니다.

 

4.  라이프사이클 훅:  Composition API는 onMounted, onUpdated, onUnmounted 등의 라이프사이클 훅을 제공하여 컴포넌트의 상태에 따라 특정 로직을 실행할 수 있도록 합니다. 이 라이프사이클 훅들은 setup 함수 내부에서 호출됩니다.

 

Composition API의 장점

• 로직 분리와 재사용: 여러 기능을 작은 함수 단위로 나눌 수 있어 코드의 유지보수성이 향상됩니다.
• 가독성 향상: 컴포넌트가 커질수록 로직을 한곳에 모아두기 쉬워져 가독성이 높아집니다.
• 타입스크립트와의 호환성: Composition API는 TypeScript와 자연스럽게 호환되어 타입 안전성을 높이는데 유리합니다.

Vue3에서 Composition API를 사용하면 더 큰 프로젝트나 복잡한 로직을 갖춘 컴포넌트를 만들 때 유리하며, 필요에 따라 Option API와 함께 혼용해 사용할 수도 있습니다.