Vue 컴포넌트에서 name 속성을 명시하는 이유

뷰를 조금씩(정말 조금씩..) 공부하고 있는데, 의아한 점이 하나 생겼습니다.

<script>
export default {
  name: 'HelloWorld', // 이 친구는 없어도 잘 동작하던데..?
  props: {
    msg: String
  }
}
</script>

바로 컴포넌트의 데이터를 관리하는 부분에서 name 이라는 속성을 내보내고 있는데, name 속성은 있으나 없으나 에러나 경고를 출력하지 않았기 때문입니다.

 

찾아본 결과, name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 합니다.

1. 컴포넌트 구조가 재귀적일 때 : 재귀 컴포넌트에 대한 내용은 리액트에서는 들어보지 못한 개념이라 생소하지만, name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다고 합니다.
2. Vue 개발자 도구를 사용할 때

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

Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 name을 기반으로 컴포넌트 트리를 보여줍니다.

 

따라서 컴포넌트를 재귀적으로 구성하지 않는다면 name 속성을 활용하는 것은 자유이나, 원활한 디버깅을 위해 항상 명시할 것을 권장한다고 볼 수 있겠습니다. 😄