[ Composition API ] vs [ Optional API ]

이전 글에서 Vue Import 예약어 관련해서 Composition API라는 말이 나왔다.

 

Optional API

먼저 Optional API를 알아보자. 주로 Vue2에서 쓰인다.

컴포넌트의 속성, 메소드, 라이프사이클 훅 등을 객체 리터럴 형태로 정의할 수 있다.

→ 객체 리터럴이란 중괄호({})를 사용하여 객체를 정의하고, 속성-쌍 (key-value) 형태로

     프로퍼티를 구성하는 것이다. 다음 이미지가 예시이다.

 

 

data 객체는 컴포넌트의 데이터 속성을 정의하고,

methods 객체는 컴포넌트의 메소드를 정의한다.

created는 Option API에서 사용하는 라이프사이클 중 하나이다.

 

→ 상당히 직관적이다. 각각의 역할이 무엇인지 직관적으로 알 수 있다. 그런데 저런 함수가 많아지면

     function에 대해서 분석하고 어디서 실행되야 하는지 보기가 까다로워진다. 이로 인해 Vue3에서부터

     CompositionAPI를 사용하게 됐다.

     

 

Composition API

Optional API의 단점을 보완하고 개발자가 코드를 구조화하기 쉽게 만들어주기 위해 만들어진 형태이다.

 

다음 이미지를 통해서 설명하겠다.

 

 

setup()함수안에 넣음으로써 함수의 흐름 형태를 더 알아보기 쉬워진다. 이전 OptionalAPI의 경우 개수가 많아지면

직관적으로 무슨 역할을 하는지는 알기 쉽겠지만 각각의 함수를 해석하는데 상당한 시간이 걸릴 것이지만

Compositional API를 통해 함수에 대한 흐름을 더욱 쉽게 인식할 수 있게 됐다.