제리코드르렁

Vue3에서는 reactive와 ref 를 사용해 반응형 상태 (Reactive State)를 관리함이 두 기능은 비슷하지만 사용 목적과 방식에 차이가 있음 아래에서 각 기능의 차이와 언제 사용하는 것이 좋은지 알아보겠음 1. ref란?단일 값 또는 원시 데이터 타입 (string, number, boolean 등)을 반응형으로 관리할 때 사용객체, 배열도 ref로 감쌀 수 있지만, 이 경우 내부 속성에 직접 접근하려면 .value가 필요import { ref } from 'vue'const count = ref(0) // 숫자 값을 반응형으로 관리count.value++ // ref는 .value로 접근해야 함console.log(count.value) // 1.value로 접근해야만 값에 접근할..

const selectAll = async () => { if (tableRef.value) { if (allSelected.value) { tableRef.value.clearSelection() // 선택 해제 } else { tableRef.value.toggleAllSelection() // 전체 선택 } }} tableRef.value 확인if (tableRef.value) {이 조건문은 tableRef가 유효한 엘리먼트 참조를 가지고 있는지 확인합니다.tableRef는 컴포넌트에 대한 참조로, Element Plus의 ref를 사용하여 테이블의 인스턴스에 접근합니다.allSelected.value 확인if (allSelected.value) { tabl..

v-model 디렉티브 활용법 학습v-model은 부모와 자식 컴포넌트 간의 양방향 데이터 바인딩을 쉽게 구현해주는 디렉티브임.부모 컴포넌트에서 자식 컴포넌트의 데이터를 바인딩하고, 자식 컴포넌트에서 이벤트로 값을 업데이트할 수 있음.기본적인 부모-자식 데이터 바인딩 예제 구현부모 컴포넌트에서 속성을 내려주고, 자식 컴포넌트에서 이벤트로 값을 업데이트하는 방식을 먼저 구현함. 검색어: {{ searchName }} v-model 적용으로 코드 개선기존 코드에서 이벤트와 메서드를 모두 작성해야 했지만, v-model을 사용하면 코드가 더 간결해짐.v-model을 적용하면 부모 컴포넌트가 자식 컴포넌트로 값을 전달하고, 자식 컴포넌트가 자동으로 부모 데이터를 업데이트함. ..

참고자료 : 원쌤의 Vue.js 퀵스타트provide와 inject는 부모-자식 컴포넌트 간의 데이터 전달을 간소화하는 기능이다. 복잡한 컴포넌트 계층 구조에서, 각 계층을 거쳐 속성을 전달할 필요 없이 상위 컴포넌트에서 제공한 데이터를 하위 컴포넌트에서 바로 사용할 수 있게 한다.  컴포넌트의 계층 구조가 복잡해지면 계층 구조를 따라 연속적으로 속성을 전달해야 하는 문제가 있음해결방법 => provide, inject를 이용 provide/inject의 원리와 사용법provide: 상위 컴포넌트에서 하위 트리에 공유할 데이터를 제공함.inject: 하위 컴포넌트에서 상위에서 제공한 데이터를 주입받아 사용함.이 패턴은 컴포넌트 간 깊은 계층 구조에서도 데이터를 쉽게 전달할 수 있도록 돕는다.