이전 글 2025.03.31 - [Frontend/Vue 3] - [단일 파일 컴포넌트-1] 프로젝트 설정컴포넌트의 조합복잡한 화면의 Vue 애플리케이션은 여러 컴포넌트 조합하여 개발부모-자식 관계로 `트리 구조` 형성여러 컴포넌트를 조합하면, 컴포넌트 간의 정보 전달 必∴ `속성`과 `이벤트`를 이용함속성1) 속성을 이용한 정보 전달부모 컴포넌트 → 자식 컴포넌트로 정보 전달하는 방법자식 컴포넌트는 `props` 옵션으로 속성 정의부모 컴포넌트는 `v-bind`를 이용해 자식 컴포넌트의 속성에 정보 전달📌 속성으로 전달 받은 데이터 변경X = 읽기 전용부모에서 속성 값 변경 👉 자식은 자동으로 다시 렌더링부모 컴포넌트: App.vue자식 컴포넌트: TodoList.vueApp 컴포넌트에서 data ..

Provide & Inject일반적으로 부모->자식 컴포넌트로 데이터를 전달할 때는 `props` 사용이렇게 정보를 전달하면 계층 구조를 따라 연속적으로 속성을 전달해야 하는 문제가 있음 (prop drilling)`provide & inject`를 이용하여 이러한 문제를 해결함공용 데이터를 부모 컴포넌트에서 제공(proivde)하여, 해당 데이터가 필요한 하위 컴포넌트에서 주입(inject) 하여 사용사용 예시조상(부모) 컴포넌트: App부모(자식) 컴포넌트: SongList자식(자손) 컴포넌트: SongListItemApp 에서 제공하는 icons 데이터를 `공용데이터`로 만들어 SongListItem에서 사용하도록 함App 내에서 `provide()` 함수를 사용해 icons 속성을 가진 객체를 애..

...동적 컴포넌트 작성 예정...v-model 디렉티브?3장에서 학습한 양방향 바인딩 을 지원하는 `v-model`을 말함기존에는 동일 파일(컴포넌트)에서 사용했지만, 컴포넌트 개념에서 서로 다른 파일 (컴포넌트)이를 컴포넌트에서 사용하면 미리 정의된 속성명과 이벤명을 통해 양방향 바인딩처럼 부모컴포넌트에서 사용 가능📌 컴포넌트에서 v-model 디렉티브는 부모 컴포넌트에서만 이점이 있음v-model을 사용하지 않은 경우자식으로부터 이벤트를 수신해 함수와 매핑 하는 `@update:name ="changeSearchName"` changeSearchName 함수: 자식으로부터 받아온 값 (여기서는 name)으로 searchName 속성 업데이트v-model을 사용한 경우부모 컴포넌트: InputNam..