윤시의 블로그

Vue.js의 컴포넌트 시스템은 애플리케이션을 독립적이고 재사용 가능한 단위로 분리하여 관리하는 데 중요한 역할을 한다. 컴포넌트는 부모-자식 관계를 형성하며, 데이터를 효율적으로 전달하고 이벤트를 처리하는 다양한 방법이 있다. 이번 글에서는 Vue 컴포넌트 심화 개념인 props, emit, v-model, slot, provide/inject, teleport에 대해 알아볼 예정이다. 1. Props : 부모 → 자식 간 데이터 전달props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. Vue에서는 단방향 데이터 흐름을 유지하며, 부모에서 자식으로 전달된 데이터는 자식에서 수정할 수 없다. 자식은 부모로부터 받은 값을 읽기만 할 수 있고, 수정은 부모 컴포넌트에서만 가능하다.주요 ..

Vue.js의 반응형 API는 데이터가 변경될 때 UI를 자동으로 업데이트하는 시스템이다. 이 API는 애플리케이션의 상태 관리와 UI 업데이트를 효율적으로 처리할 수 있게 해준다. Vue의 주요 반응형 API인 ref(), reactive(), computed(), watch(), watchEffect()에 대해 다루고자 한다.  1. ref() - 기본 타입의 반응형 데이터ref()는 숫자, 문자열, 불리언 등 기본 타입을 반응형으로 만드는 API이다. ref()로 생성된 값은 .value를 통해 접근하고 수정해야 한다. 카운트: {{ count }} 증가 count는 ref()를 사용하여 반응형으로 선언된 값이다. .value를 통해 값에 접근하고 수정할 수 있다. 2. reactive() - ..