괴물 클럽

1. 컴포넌트 정의 및 재사용성 (전역과 지역 등록) Vue에서 컴포넌트는 UI를 재사용 가능한 단위로 분리하는 핵심 메커니즘입니다. 컴포넌트는 사용 범위에 따라 지역(Local) 또는 전역(Global)으로 등록할 수 있습니다. 지역 컴포넌트는 일반적으로 파스칼 케이스(PascalCase)로 명명하며, 전역 컴포넌트는 케밥 케이스(kebab-case)로 명명하는 것이 관례입니다. // 지역 ...

1. 컴포넌트 아키텍처의 핵심 1.1 컴포넌트의 본질 Vue.js에서 컴포넌트는 재사용 가능한 UI 조각을 캡슐화하는 핵심 메커니즘입니다. 기본적으로 커스텀 HTML 요소로 동작하며, Vue 컴파일러가 이를 인식하여 특정 동작을 부여합니다. 모든 컴포넌트는 근본적으로 Vue 인스턴스이므로, 루트 인스턴스와 유사한 라이프사이클 훅과 옵션 객체를 공유합니다. 컴포넌트를 독립 ...

Props 처리 단계 isFavorite 속성 추가 props: [ 'userName', 'userPhone', 'userEmail', 'isFavorite' ], 변수 선언 favoriteStatus: this.isFavorite 값 변경 로직 구현 // Props는 직접 수정할 수 없으므로 별도의 변수 사용 // toggleFavorite 메서드에서 변수 값 변경 toggleFavorite() { this.favoriteStatus = this.favoriteStatus === '1' ? ...

서론 Vue 프로젝트에서 컴포넌트 간의 데이터 전달과 메서드 호출은 빈번하게 필요한 기능이다. Vuex 상태 관리를 사용하여 모든 데이터 전달 문제를 해결할 수도 있지만, 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 이 글에서는 Vue에서 사용할 수 있는 다양한 컴포넌트 통신 방식을 상세히 다룬다. 컴포넌트 통신 방식의 분류 부모 → 자식 (props) 자식 → 부모 ...

Props를 통한 부모 → 자식 데이터 전달 React에서 컴포넌트는 기본적으로 독립적인 단위이므로 외부로부터 데이터를 받기 위해서는 props를 사용해야 합니다. props는 컴포넌트에 전달되는 읽기 전용 입력값입니다. // 부모 컴포넌트에서 속성으로 데이터 전달 <UserProfile name="김민수" age={28} isActive /> // 함수형 컴포넌트: 매개변수로 props 수신 funct ...

컴포넌트 간 데이터 흐름의 핵심: Props 사용법 Vue.js에서는 컴포넌트 간의 데이터 흐름을 명확하게 관리하기 위해 props라는 기반 구조를 제공합니다. 이는 부모 컴포넌트에서 자식 컴포넌트로 단방향 데이터 전달을 가능하게 하며, 구성 요소의 재사용성과 유지보수성을 높입니다. Props의 기본 구조 자식 컴포넌트는 props 옵션을 통해 부모로부터 전달받은 값을 정의 ...

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 1. 부모 컴포넌트에서 자식 컴포넌트에 바인딩된 매개변수 사용하기 <template> <div> <!-- 자식 컴포넌트에 :headerText="welcomeMsg" 매개변수 전달 --> <app-header :headerText="welcomeMsg" parentContext="this"></app-header> </div&gt ...