2.Composition API기본 (setup, ref, reactive)

기존 버전(vue2)에서는 data() , Methods에는 함수를 , Computed에는 계산 속성이 들어갔다.

그밖에 라이프사이클 Hook이나 Watch등 많은 부분으로 로직이 분류되었다.  그에 따라 코드가 뒤죽박죽 되어 가독성이 떨어지는 단점이 생기곤 했다. 

 

3버전으로 들어서며 모든 코드를 독립적으로 정의하는게 가능해졌다.

 

setup() 을 사용하게되었다!

 

우리의 공식사이트에서 말한 정의는..

[ setup컴포넌트옵션 ]

: 컴포넌트가 작성되기 전에 props가 해결되면 실행되고, CompositionAPI의 엔트리포인트로서 기능한다.

 

주의: 컴포넌트의 인스턴스를 참조하지 않기 때문에 setup안에는 this사용하는것을 피해야한다.

 

props와 context를 인자로 받는 함수

(뭔말이고)

 

쉽게 말하자면,

 

해당 함수내에서 기존의 data, computed, method, lifeCycle(라이프사이클도??!! OK!)  에 대한 설정이 한번에 가능해졌다!

 

OK

 

리액티브선언!!

 

기존의 data 영역을 통한 변수선언은 setup 내부에서는 2가지로 선언 가능해졌다.

ref   reactive

ref는 this에 대한 액세스에 의존하지 않고 반응형 변수를 처리하기 위해 Composition API에 도입된 새로운 개념이란다.

기본형값을 취하고

ref 선언한 값은 반드시 .value를 통해 접근해야한다. 

 

reactive : 객체만;;;

 

 

(reactive에 대한 더많은 공부가 필요하다..)