vue3 (35) 썸네일형 리스트형 [Vue3] Vue3은 리렌더링을 어떻게 트리거할까? Vue3의 공식문서를 읽어봐도 reactivity의 종속성 추적에 대한 설명만 있지 결과적으로 리렌더링을 어떻게 트리거 하는지에 대한 설명은 없는것 같다. 에반 유가 설명한 Vue3 코어 모듈(https://itchallenger.tistory.com/807)의 역할에 기반해서 해당 코드가 어떻게 동작할지 추론한 후 코드베이스를 분석하였다. 정답 : Renderer 모듈의 setupRenderEffect https://github.com/vuejs/core/blob/main/packages/runtime-core/src/renderer.ts#L1288 GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript fra.. [Storybook/ Vue3] Play 함수를 이용하여 컴포넌트 상호작용 자동화 Storybook 공식 문서를 번역한 글입니다. https://storybook.js.org/docs/vue/writing-stories/play-function Play function Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org Play 함수는 스토리가 렌더링된 후 실행되는 작은 코드 스니펫입니다. 다음과 같은 용도로 사용할 수 있습니다. 사용자 대신 컴포넌트와 상호작용 테스트 시나리오를 .. [Vue3] Composition API와 Composable이란 무엇인가? 실무에서 Vue3를 이용해 아토믹 디자인 패턴을 적용한 공통 UI 컴포넌트 셋을 개발해고 있다. 원래 나는 React 개발자 였으므로, hooks 아키텍처에 익숙하기에, 대부분의 업무로직과 상태가 결합된 기능들을 composable로 뽑아내서 작업하려 하고 있다. 그런데 Vue3은 Vue2의 하위호환을 위한 Option API로 작성된 코드들도 혼용하는 경우도 꽤 보인다. 나는 Vue2를 안해보았기 때문에 새로운 API를 만나면 헷갈린다... @.@ 그렇다면 Composition API와 Composable은 무엇이며 Option API와 무슨 차이가 있을까? Composition API Option API는 컴포넌트 인스턴스에 프로퍼티와 메서드를 추가하기 위한 수단이다. 또한 Composition AP.. [Vue3] watch vs watchEffect 사용사례 비교 해당 글을 번역한 글입니다. https://www.vuemastery.com/blog/vues-watch-vs-watcheffect-which-should-i-use/ Vue’s watch vs watchEffect, which should I use? | Vue Mastery Let’s unwrap the core differences between watch and watchEffect so that you can use the best tool for the job in your day-to-day code. www.vuemastery.com Vue에서 reactive value(ref, reactive, computed)이 변경될 때마다, 특정 함수(사이드이펙트를 포함한 함수)를 실행하고 싶다면,.. [Vue3] v-model props로 사용하기: modelValue 컴포넌트의 props로 v-model을 사용하는 방법을 알아봅니다. Props은 readOnly reactive object임 즉 computed 등으로 반응성 체킹은 가능하지만 props를 직접 수정할 수는 없음 우회 방법 : modelValue https://vuejs.org/guide/components/events.html#usage-with-v-model Component Events | Vue.js vuejs.org 놀랍게도 Vue3은 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 이를 해결함 즉 아래와 같은 소스코드는 아래와 같이 컴파일러에 의해 변환됨. 자식 컴포넌트에서는 이를 대비한 구현을 해줘야 함 참고 : 아래와 같이 구현하는 것도 가능함. 뭔가 리코일 같은 .. [Vue3] props와 컴포넌트 상태 동기화 Vue3에서 컴포넌트의 상태와 외부 props 값을 동기화 하는 방법을 알아봅니다. TL;DR props은 기본적으로 readOnly인 reactive 값임 기본값을 reactive하게 선언 내부적으로 사용할 상태를 computed로 선언하여 props 여부에 따라 활용 여부 결정 useControllable 컴포저블 해당 함수는 headlessUI 깃헙에서 가져옴 사용처에서는 아래와 같이 활용함. let [checked, theirOnChange] = useControllable( computed(() => props.modelValue), // props를 활용한 computed (value: boolean) => emit('update:modelValue', value), // 값 변경 시 호출활 .. Vue3가 DOM 업데이트를 비동기적으로 수행하는 방법 프론트엔드 프레임워크(Vue3)는 어떻게 UI 업데이트를 비동기적으로 순서를 보장하여 처리할까요? Vue3의 Scheduler 소스 코드를 읽다가 아래와 같은 함수를 발견했습니다. export function nextTick( this: T, fn?: (this: T) => void ): Promise { const p = currentFlushPromise || resolvedPromise return fn ? p.then(this ? fn.bind(this) : fn) : p } 해당 함수의 동작이 아리까리하여 관련 자료를 찾다가 좋은 내용을 발견해서 정리해둡니다. nextTick? 정의: 다음 DOM 업데이트 주기가 끝난 후 실행할 지연된 콜백입니다. 데이터를 수정한 직후에 이 방법을 사용하여 업데.. Vue3의 반응성 완벽 이해 2편 : ref와 computed Vue3의 반응성을 직접 구현하며 Vue3에 대한 더 깊은 이해를 도모해 봅시다. 이전 시리즈 : 2022.12.10 - [Vue.js] - Vue3의 반응성 완벽 이해 1편 : 종속성 추적 Vue3의 반응성 완벽 이해 1편 : 종속성 추적 vue mastery의 리액트 코어팀이 설명해주는 vue3의 반응성의 원리를 알아봅니다. 공식 문서와 nhn의 게시물을 읽어봤지만, 약간 납득이 안되는 부분들이 있었습니다. 해당 강의를 통해 어느정도 해소 itchallenger.tistory.com 실행 중인 효과를 저장하는 전역 변수와 ref 이전 게시물의 예제 소스 코드(all-together.js)의 동작에는 하나의 문제점이 있는데요, 이전 소스 코드 실행 후 get을 실행할 때마다 effect가 추가됩니다. .. 이전 1 2 3 4 5 다음
