Vue.js에서 컴포넌트란 무엇인가요?
_____A: Vue.js에서 컴포넌트는 재사용 가능한 독립된 UI 단위입니다. 작은 단위의 템플릿, 로직, 스타일을 하나로 묶어 캡슐화한 것으로, 복잡한 인터페이스를 여러 개의 컴포넌트로 나누어 관리할 수 있게 해줍니다.
Q: 컴포넌트의 주요 특징은 무엇인가요?
A:
- 재사용성: 같은 컴포넌트를 여러 위치에서 반복 사용할 수 있습니다.
- 캡슐화: 템플릿, 스크립트, 스타일이 하나의 컴포넌트 파일 내에 통합되어 있어 독립적으로 관리됩니다.
- 유지보수성: 코드가 모듈화되어 있어 수정 및 확장이 쉽습니다.
- 계층구조: 부모-자식 관계로 컴포넌트들을 구성하여 복잡한 UI를 체계적으로 관리할 수 있습니다.
Q: Vue 컴포넌트는 어떻게 정의되나요?
A: Vue 컴포넌트는 일반적으로 `Vue.component` 함수나 `.vue` 단일 파일 컴포넌트(SFC) 형식으로 정의합니다. SFC는 ``, `
- `methods`: 컴포넌트 내에서 사용되는 함수들입니다.
- `computed`: 계산된 속성으로, 데이터에 기반해 동적으로 값이 결정됩니다.
- `watch`: 특정 데이터 변화를 감지해 반응합니다.
- `emits`: 자식 컴포넌트가 부모에게 이벤트를 발생시키기 위한 명세입니다.
Q: 컴포넌트 간 데이터 전달은 어떻게 이루어지나요?
A: 부모 컴포넌트가 자식 컴포넌트에 `props`를 통해 데이터를 전달합니다. 자식은 `this.$emit`을 사용해 이벤트를 발생시키며 부모에게 신호를 보낼 수 있습니다. 이렇게 데이터 흐름은 보통 단방향(부모→자식)이고 이벤트는 자식→부모 방향으로 전달됩니다.
Q: 컴포넌트를 사용하는 이유는 무엇인가요?
A: UI를 구성하는 부분들을 독립적으로 설계해 코드 재사용과 유지보수를 용이하게 하며, 애플리케이션의 구조화와 확장성을 높여줍니다. 또한, 팀 단위 개발 시 역할 분담과 협업이 쉬워집니다.
Q: 컴포넌트와 뷰 인스턴스의 차이점은 무엇인가요?
A: 뷰 인스턴스는 애플리케이션의 루트 역할을 하는 최상위 Vue 인스턴스입니다. 반면 컴포넌트는 재사용 가능한 UI 조각으로, 뷰 인스턴스 안에 포함되어 여러 컴포넌트들이 계층적으로 구성됩니다.
Q: 단일 파일 컴포넌트(SFC)의 장점은 무엇인가요?
A: 템플릿, 자바스크립트, CSS를 한 파일에 모아 관리하여 컴포넌트 개발 및 유지보수를 쉽게 하고, 빌드 도구를 통해 최적화된 코드로 변환할 수 있습니다. 또한, IDE의 문법 하이라이팅과 자동 완성 기능을 지원받기 쉽습니다.
