[Vue.js] name의 쓰임 알아보기

vue를 사용하다 보면

<script>
export default {
  name: 'HelloWorld', 
  props: {
    msg: String
  }
}
</script>

위와 같은 코드가 있는데, name이라는 속성이 존재한다. 그런데 이 name은 있거나 없거나 상관이 없다. 그래서 이 속성을 어디에 쓰이는지 궁금해서 구글링해보았다.

name속성의 명시

name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 한다.

1. 컴포넌트 구조가 재귀적일 때 : 이말은 즉슨 재귀 컴포넌트를 말한다.
   1. 재귀 컴포넌트 : 템플릿에서 자기 자신을 호출하는 컴포넌트를 의미한다.
   2. name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다.
2. Vue 개발자 도구를 사용할 때

CustomComponent가 있을 때

Anonymous Component가 있을 때

좌 : name 속성에 "CustomComponent" 라는 값을 주었을 때 / 우 : name 속성을 명시하지 않았을 때

Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 name을 기반으로 컴포넌트 트리를 보여준다. 따라서 컴포넌트를 재귀적으로 구성하지 않는다면 name 속성을 활용하는 것은 자유이나, 원활한 디버깅을 위해 항상 명시할 것을 권장한다.

name속성의 특징

• name은 컴포넌트 파일명과 동일하게 작성하는 것이 좋다.
  • import한 모듈명이 아닌 설정한 name으로 template 가져다 쓸 수 있다. 그러기에 모듈명과 정확한 상관관계 확인 필요하다.
• 하나의 단어로 name이 구성되어 있는 경우 별도 name 작성은 필요없다.

🔗 참고

https://merrily-code.tistory.com/146

https://dreamcoding.tistory.com/17