231206(수)
🌱 성장일지 8.0
책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록
- 살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
- 성장하고 있는 것이 살아 있는 것이다.
- 생명의 유일한 증거는 성장이다!
⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.
Vue Instance의 Lifecycle
거두절미하고 캡틴판교님의 글에 작성된 이미지를 보자.
위 이미지를 보면 Vue Instance의 Lifecycle은 크게 4가지로 나눌 수 있다.
- Creation(인스턴스 생성)
- Mounting(인스턴스를 화면에 부착)
- Updating(인스턴스가 화면에 부착된 상태에서 내용 변경)
- Destruction(인스턴스가 화면에서 제거)
그리고 해당 Lifecycle 중간 중간 특정 시점에 호출되는 Lifecycle Hook이 존재한다. 이는 Vue Instance의 Lifecycle 중간 중간에 호출되는 함수를 의미한다. 이를 통해 특정 시점에 원하는 로직을 수행할 수 있다.
대표적으로는 created, mounted, updated, destroyed가 있고 이 각각에 대해서 'before'에 해당하는 훅이 존재한다.
실제 자주 사용되는 건,
created,beforeMounted,mounted,destroyed정도라고 한다.
Vue 3 Instance Lifecycle API
Vue 3에서는 Composition API가 도입되면서 Instance Lifecycle API가 생겼다. Options API에서는 객체의 속성으로 Lifecycle Hook을 정의했지만, Composition API에서는 함수로 정의하기에 Instance Lifecycle API라고 부른다.
자세한 내용은 Vue3의 Instance Lifecycle를 꼭꼭꼭 참고하자. 맨 아래에 Options API의 Lifecycle Hook과 비교한 내용이 있어서 정말 좋다.
Vue3 Composition API의 setup()
주의사항이 있어 남겨둔다. setup() 함수의 첫 번째 인자는 props인데, 이 props를 절대 구조분해할 수 없다. 구조분해하면 안된다. 왜냐하면 구조분해하게 되면 props의 reactive가 사라지게 되어 Vue.js가 props의 변화를 감지하지 못하게 되기 때문이다.
📝 회고
강의에서는 가능하면 Vue의 장점인 Options API를 사용하되, 다소 복잡한 컴포넌트가 될 때는 Composition API와 Composable Function을 사용하라고 한다. 근데 또 한편으로는 <script setup></script>가 있어서, 이를 적극적으로 활용해보려고 한다. 다만 조금 아쉬위면서도 좋은 건, 이렇게 되면 더욱더 React의 함수 컴포넌트와 굉장히 비슷해진다는 점이다.