Lifecycle Hooks🌱 Vue의 Lifecycle라이프 사이클은 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 말한다.라이프 사이클 훅은 라이프 사이클 단계에서 사용자가 로직을 추가할 수 있는 단계별 기능이다.라이프 사이클을 잘 알아둬서 낄끼빠빠를 잘하도록 하자 🌱 Options API 와 Composition API 에서의 Lifecycle Hooks Options API Composition API (setup 함수 내부) X setup beforeCreate 필요없음 (setup 함수 내에서 사용하면 된다) created 필요없음 (setup 함수 내에서 사용하면 된다) beforeMounted onBeforeMount mounted onMoun..
Slots🐔 Slots 기본적인 사용 방법slot은 컴포넌트의 재사용성을 높여준다.slot을 통해 하위 컴포넌트를 확장하거나 재정의할 수 있다. 구독하기 slot을 통해 특정 컴포넌트에 콘텐츠를 전달할 수 있다.콘텐츠를 위치시키고 싶은 곳에 slot 배치하고, 사용하는 쪽에서 콘텐츠를 넣으면 된다. 구독하기최종적으로 화면에는 이렇게 구성이 된다. 🐔 Slot의 Fallback Content 기능 기본 slot은 Fallback Content를 제공하는데 상위 컴포넌트에서 콘텐츠가 적용되지 않을때에 대한 default 콘텐츠를 말한다.사용하는 방식은 그냥 slot에 작성하면 된다 🐔 Slot의 Named Slotsslot 요소에 이름을 부여하여 여러개의 ..
Watch와 WatchEffect로 감시하자반응형 상태 변경을 감지하여 다른 작업을 수행해야 하는 경우 활용한다. 👀 watch 함수const message = ref('Hello World');// message를 감시한다.watch(message, (newValue, oldValue) => { console.log('newValue: ', newValue); console.log('oldValue: ', oldValue);});첫번째 매개변수는 newVaule, 두번째 매개변수는 oldValue가 온다. newValue는 다양한 타입이 될 수 있다. (ref, reactive, computed, getter 함수, array 등) 👀 모든 중첩된 속성을 감지하는 watch 함수 co..
Provide와 Inject🗿 Prop Drillingprop drilling이란 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props 를 사용하는데,규모가 큰 컴포넌트 트리가 있다면 자손 컴포넌트와 연관된 모든 자식들에게 props를 전달해야하는 것을 말함.(드릴로 뚫고 내려가는 것 같아서) 이러한 문제를 해결하는게 vue3의 provide와 injectprovide와 inject를 사용하면 부모의 데이터는 계층 구조 상관없이 전달 가능하다. 🗿 Provideexport default { setup() { provide('message', 'hello!'); },};상위 컴포넌트의 setup 함수 내부에서 provide 함수를 ..
Non-Prop 속성 (fallthrough 속성) props 또는 event 에 명시적으로 선언되지 않은 속성 또는 이벤트를 말한다.예를 들면 class, style, id가 있다. 😄 속성 상속, 병합컴포넌트가 단일 루트 요소로 구성되어 있으면 non-prop 속성은 Root 요소의 속성에 자동으로 추가된다.즉, 자식 컴포넌트는 부모 컴포넌트의 요소를 상속받는다. 부모 컴포넌트에서 class와 style을 자식 컴포넌트 속성에 추가했을때자식 컴포넌트에 이미 class와 style 속성이 정의되어 있다면 병합한다. click me자식 컴포넌트에서 btn 클래스의 button 생성 부모 컴포넌트에서 large 클래스의 자식 컴포넌트를 가져왔다. click me렌더링된 최종 DOM자식 컴포넌트에 작성한..