Composition API3 29. 컴포지션 API 활용(lifecycle, refs, props, context) 1. 반드시 읽어야 하는 공식 문서 - 지금까지 배운 내용을 컴포지션 API 형태로 작성하기 위해서 반드시 읽는 것을 권장합니다. - 전혀 어렵지 않으니 한번쯤 꼭 훑어보고 아래의 전환 예제를 따라 해보기를 권장합니다. 컴포지션 API의 Setup 공식문서 컴포지션 API의 라이프사이클 훅 공식문서 컴포지션 API의 provide와 inject 공식문서 컴포지션 API의 refs 공식문서 2. 컴포지션 API로 코드 전환 예제 [기존의 작성 방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} [컴포지션 API 작성방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversed.. 2021. 5. 28. 28. Vue - 컴포지션 API 작성방법 1. 예제 코드 [App.vue] {{ count }} [출력화면] [코드 설명] - 위의 코드는 화면의 숫자를 클릭하면 increase 메소드가 작동하여 숫자가 증가하는 방식이다. - this를 사용하여 데이터 객체인 count를 참조하여 반응성을 활용한 코드이다. - 위의 코드를 기반으로 컴포지션 API를 작성해보자. 2. 컴포지션 API 전환 a) 1차 전환 - 반응성이 구현되지 않은 상태 [App.vue] {{ count }} - 위의 코드를 구현한 뒤, 실제로 숫자를 클릭해보면 increase가 작동하지 않는 것을 확인할 수 있다. - 더 정확히 이야기 해보면 increase 메소드가 작동하지 않는 것이 아니라 화면이 업데이트(= 새로고침)되지 않는 것이다. - 즉, 반응성의 구현이 되지 않은 .. 2021. 5. 28. 27. Vue - 컴포지션 API란? 1. 공식 문서 공식문서 바로가기 소개 | Vue.js 소개 컴포지션 API가 필요한 이유 Vue 컴포넌트를 만들면 재사용 가능한 코드 조각으로 결합되어진 인터페이스의 반복가능한 부분들을 추출할 수 있습니다. 이것만으로도 어플리케이션에서 유지 v3.ko.vuejs.org 2. 컴포지션 API란? - Vue 객체를 만들다 보면 다양한 속성(data, computed, methods, etc)들을 작성하게 된다. - 이전의 포스팅에서도 많이 사용해 보았지만, 단순한 예제코드를 이용했기 때문에 코드를 이해하고 읽는데에 큰 불편함이 없었다. - 하지만, 코드가 복잡해지면 속성의 내용이 복잡해지면서 어떤 코드가 어떤 기능을 하는지 구분하기가 힘들어진다. - 정리하자면, 코드의 가독성과 이해도가 떨어진다. - 이처.. 2021. 5. 28. 이전 1 다음
