Vue

computed()반응형 데이터를 포함하는 복잡한 논리를 표현할 때 사용하는 계산된 속성 계산된 ref를 반환하기 때문에 computed 값 또한 .value를 통해 접근한다. (템플릿 표현식에서는 .value 없이 참조 가능) computed는 해당 computed 값이 의존 중인 반응형 데이터 ref, reactive 등의 변경을 자동으로 추적한다. computed는 의존된 반응형을 기반으로 캐시된다.const scores = ref([100, 80, 88, 50, 70, 90, 96])const average = computed(() => { const sum = scores.value.reduce((sum, item) => (sum += item), 0) return sum / scores.v..

어떤 것을 사용해야 할 지 고민하다가 정리했다. 공식 문서에서 분명하게 잘 설명해줬기 때문에 이를 좀 더 확실히 기억하고자 테스트해봤다. v-ifv-if 문의 경우 조건의 성립(True / False) 여부에 따라 요소의 렌더링 여부가 결정된다. v-showv-show의 경우 조건 결과와 관계없이 태그를 렌더링하지만, False의 경우 display: none 처리를 통해 보이지 않게 한다. 결론적으로,→ 보였다/ 안 보였다 빈도가 많으면 v-show→ 조건이 여러 개면 v-if (v-else-if, v-else 등 사용 가능)

reactive()reactive()는 객체 자체를 반응형으로 만든다. reactive()의 반환 값은 원본 객체를 재정의한 프록시(proxy)이다.const raw = {}const proxy = reactive(raw)// 반응형으로 재정의 된 것은 원본과 같지 않습니다.console.log(proxy === raw) // false 원본 객체는 반응형이 아니고, 프록시만 반응형이기 때문에 객체를 Vue의 반응형 시스템으로 작업할 때는 상태를 재정의한 프록시만 사용하는 것이 가장 좋다. 프록시에 대한 일관된 접근이 보장된다.// 객체를 reactive() 한 반환 값과 프록시는 동일합니다.console.log(reactive(raw) === proxy) // true// 프록시를 reactive()한..

watch Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org하나 이상의 반응형 데이터 소스를 감시하고, 소스가 변경되면 콜백 함수를 호출한다.watch()는 기본적으로 게으르기(lazy) 때문에, 감시된 소스가 변경되었을 때만 콜백이 호출된다. 첫 번째 인자 → 감시될 소스값을 반환하는 getter 함수ref반응형 객체또는 위에 나열한 것들의 배열※ 반응형 객체의 속성(number, string 등)은 감시할 수 없다. 두 번째 인자 → 콜백콜백의 인자변경된 값이전 값사이드 이펙트 클린업 콜백을 등록하기 위한 함수 세 번째 인자(optional) → 옵션 객체immediate: 감시자가 생성되는 즉시 콜백 호출deep: 소스가 객체인 경우, 깊은..

ref()composition API에서 반응형 상태를 선언 시 권장하는 방법import { ref } from 'vue'const count = ref(0) 템플릿에서 ref를 사용할 때는 .value 를 추가할 필요가 없다. 편의상 ref는 템플릿 내에서 사용될 때 자동으로 언래핑된다.이벤트 핸들러에 직접 참조를 변경할 때도 .value 가 불필요하다.pluscount : {{ count }} 다만 이벤트 핸들러에 따로 정의한 함수를 바인딩하여 ref를 변경할 경우, 스크립트에서 .value 는 필요하다.pluscount : {{ count }}const plusCount = () => { count.value++} 🔎 react의 useState와 비슷한 기능? 상태 관리를 위한 도구라는 점에서..

vue의 반응성 시스템을 공부하며 찾아 본 내용이라 vue에 조금 치중되어 있습니다…   공통점1. 선언적 방식으로 UI를 업데이트 한다.개발자는 데이터가 바뀌었을 때 어떤 식으로 UI가 바뀌는지를 명시하는 대신, 데이터와 UI 간의 관계를 설정하면 내부에서 알아서 UI를 갱신해준다. 2. Virtual DOM 사용데이터가 변화하면 실제 DOM을 바로 업데이트하는 대신 가상 DOM을 먼저 계산하여, 변경된 부분만 실제 DOM에 적용하는 방식으로 성능을 최적화한다. → reconciliationhttps://ko.vuejs.org/guide/extras/rendering-mechanism#virtual-dom 3. 컴포넌트 기반각 컴포넌트는 자체적인 상태를 가지고 있으며, 그 상태가 변할 때 UI를 갱신한..

Vue 2의 한계Vue 2에서 사용된 Object.defineProperty 는 객체의 각 속성에 접근할 때마다 getter와 setter를 설정하여 반응성을 제공하는 방식이다.해당 방식은 몇 가지 한계를 가지고 있다.새 속성 추가 : 이미 존재하는 속성에 대해서만 반응성을 적용할 수 있기 때문에, 객체에 새 속성을 추가하거나 배열의 특정 항목을 변경하는 경우 반응성을 처리하지 못했다.배열 처리 : 배열의 특정 인덱스 변경이나 크기 조작도 반응성 시스템에서 추적되지 않는다.성능 문제 : 큰 객체의 모든 속성에 일일이 getter와 setter를 정의하는 방식이므로, 특히 중첩된 객체 구조에서는 성능과 메모리 사용량 면에서 부담이 있었다.  Vue 3에서의 Proxy 기반 반응성 구현Vue 3의 반응성 시..

props를 넘길 때 어떤 데이터를 받을지 선언하는 defineProps 를 사용하게 되는데, 해당 개념을 사용할 경우 default value 를 설정할 수가 없다. 이에 대한 대안으로 초기 값을 설정해줄 수 있는 것이 withDefaults 이다.  실제 적용 예시   위 코드의 placeholder의 경우 withDefaults 내용을 적용하지 않았다면 아래의 사진처럼 CommonDate 컴포넌트 각각의  placeholder 안에 값을 계속해서 넣어줘야 되는 번거로움이 존재했다. ➡ withDefaults 를 공통 컴포넌트에 적용하여 불필요한 코드를 제거했다.   [ 참고 자료 ] https://v3-docs.vuejs-korea.org/api/sfc-script-setup.html#typescr..

Type 선언 방식 defineProps() 는 2가지 타입 선언 방식을 가지고 있다. 1. 런타임 선언 ◾ ( ) 안에 인수를 정의 2. 타입 기반 선언 ◾ Props의 타입을 미리 정의해두고 컴파일러는 이를 기반으로 동일한 런타임 옵션을 추론한다. (타입스크립트와 함께 사용한다면 이 방법을 권장!) 안에 인수를 정의 위의 두 가지 선언은 모두 사용가능하지만, 동시에 사용할 수는 없다. 또한 Props 타입을 별도의 인터페이스로 분리할 수도 있다. 또한 인터페이스를 외부 소스에서 가져올 수도 있다 (import) ※ 외부 인터페이스 참조는 3.3버전 이상에서만 가능함 (하위 버전에서는 로컬 인터페이스 참조만 가능) → 내가 Vue 버전 업데이트를 진행한 이유 기본 값 설정 2번째 방법인 타입 기..

의존성 주입이란? 기존 컴포넌트 기반 아키텍처는 상위에서 하위로 데이터를 전달할 때(props), props를 사용하지 않는 컴포넌트에도 props를 선언하고 전달해야 하는 Props Drilling의 문제가 있었다. 이를 해소하기 위해 redux, recoil, vuex, pinia 등 다양한 상태 관리 라이브러리를 사용하여 props를 전역 변수로 관리하는 방법을 이용하기도 했다. vue3부터는 vue 자체적으로 중간 컴포넌트를 지나지 않고도 상위에서 하위로 props를 전달할 수 있는 기능을 제공한다. 그것이 바로 의존성 주입(Provide Injection)이다. 즉, props drilling 없이 상위에서 하위로 의존성을 제공하는 것이다. 사용법 사용법 또한 굉장히 간단하다. 상위 컴포넌트에서..