반응형
vue를 사용하다 보면
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
위와 같은 코드가 있는데, name이라는 속성이 존재한다. 그런데 이 name은 있거나 없거나 상관이 없다. 그래서 이 속성을 어디에 쓰이는지 궁금해서 구글링해보았다.
name속성의 명시
name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 한다.
- 컴포넌트 구조가 재귀적일 때 : 이말은 즉슨 재귀 컴포넌트를 말한다.
- 재귀 컴포넌트 : 템플릿에서 자기 자신을 호출하는 컴포넌트를 의미한다.
- name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다.
- Vue 개발자 도구를 사용할 때
좌 : name 속성에 "CustomComponent" 라는 값을 주었을 때 / 우 : name 속성을 명시하지 않았을 때
Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 name을 기반으로 컴포넌트 트리를 보여준다. 따라서 컴포넌트를 재귀적으로 구성하지 않는다면 name 속성을 활용하는 것은 자유이나, 원활한 디버깅을 위해 항상 명시할 것을 권장한다.
name속성의 특징
- name은 컴포넌트 파일명과 동일하게 작성하는 것이 좋다.
- import한 모듈명이 아닌 설정한 name으로 template 가져다 쓸 수 있다. 그러기에 모듈명과 정확한 상관관계 확인 필요하다.
- 하나의 단어로 name이 구성되어 있는 경우 별도 name 작성은 필요없다.
🔗 참고
반응형
