[Vue 3] Composition API야, 이리오거라!

 

Vue 3에는 Composition API라는 것이 존재한다. 이것이 왜 유용하고 왜 써야하는지 간략하게 얘기하자면 코드의 재사용성과 가독성 때문이다.

 

나는 이미 컴포넌트마다 코드가 길어질대로 길어져서 전체 코드를 개발 포스팅에 올리질 않을 예정이다.

 

여러분들은 Composition API를 사용하여 나처럼 긴 코드를 작성하지 않길 바란다.

 

setup

Composition API의 시발점이 되어준다.

변수와 함수가 그대로 선언되어 사용되며 주의할 점은 setup 내에는 악명높은 자바스크립트의 this가 사라진다는 점이다.

 

쓰면 오류난다.

 

주로 ref가 사용되는데

이렇게

setup 내에 ref를 사용하여 변수를 return 시켜주면

 

 

 

이런식으로 사용자가 input에 적은 content가 그대로 스크립트와 템플릿 모두에 사용가능하다.

 

(저 this는 setup 밖에서 사용한 것이다. 셋업 내에서 라우터를 사용하고 싶다면 useRoute()를 임포트시켜서 this 없이 사용하자.)

 

생명주기

 

 

참고

 

https://v3.ko.vuejs.org/api/composition-api.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%92%E1%85%AE%E1%86%A8-lifecycle-hooks

Composition API | Vue.js

 

 

 

 

다음 시간은  'Quasar야, 너는 참 눈부시구나!'  마지막 장입니다.

 

 

Thanks for watching, Have a nice day.