[Vue] 컴포넌트 생성 시 이름 규칙

뷰 컴포넌트를 생성할 때 컴포넌트의 이름은 반드시 여러 개의 단어를 사용해야 한다.

 

프로젝트를 생성한 뒤

프로젝트/src/components 안에 컴포넌트를 하나 생성해 보자!

 

Test라는 이름을 가진 컴포넌트를 하나 생성하면 이렇게 빨간색으로 오류가 뜨게 된다.

 

이유는 무엇일까?

 

위의 오류를 읽어보면 "Test"라는 컴포넌트는 반드시 여러 개의 단어를 조합해 이름을 지어야 한다고 한다.

 

그렇다면 위와 같이 이름의 규칙은 어떤게 있을까?

 

✅ 컴포넌트 이름 규칙

컴포넌트 이름은 항상 여러 문자로 지어야 한다.
하지만 루트 컴포넌트인 App과 기본으로 제공되는 <transition> 또는 <component>와 같은 것은 제외한다.
이는 이미 존재하거나 미래에 존재할 HTML 요소들과의 충돌을 막기 위함이다. (HTML 요소는 한 단어이기 때문)

 

자세한 사용 예를 가지고 확인해보자.

/* ✓ GOOD */
Vue.component('todo-item', {
  // ...
})

/* ✗ BAD */
Vue.component('Todo', {
  // ...
})

<script>
/* ✓ GOOD */
export default {
  name: 'TodoItem',
  // ...
}
</script>

<script>
/* ✗ BAD */
export default {
  name: 'Todo',
  // ...
}
</script>

<!-- filename: Todo.vue -->
<script>
/* ✗ BAD */
export default {
  // ...
}
</script>

<!-- filename: Todo.vue -->
<!-- ✗ BAD -->
<script setup>
  // ...
</script>

<!-- filename: TodoItem.vue -->
<!-- ✓ GOOD -->
<script setup>
  // ...
</script>

<!-- filename: Todo.vue -->
<!-- ✓ GOOD -->
<script setup>
  // ...
</script>
<script>
export default {
  name: 'TodoItem'
}
</script>

 

위의 코드들처럼 오류 없이 이름을 짓는 방법이 있지만 꼭 한 단어의 이름을 사용해야 한다면

오류를 무시하는 코드를 추가해주면 된다.

 

✅ 사용 예시

1. ignores 등록하기

이 코드는 프로젝트를 생성하면 추가되는 package.json 파일 안에 있는 "rules" 부분에 추가하면 된다.

 

에러를 발생시키는 것을 무시할 수 있는 이름을 미리 등록하는 코드.

"vue/multi-word-component-names": ["error", {
  "ignores": []
}]

 

 

적용

{
  // ...
  
  "eslintConfig": {
    // ...
    
    "rules": {
      "vue/multi-word-component-names": ["error", {
        "ignores": ["컴포넌트 이름"]
      }]
    }
  },
  
  // ...
}

 

"Test"라는 컴포넌트를 예외 처리해주면 왼쪽의 오류가 없어진 것을 확인할 수 있다.

 

 

2. false로 설정하기

여러 단어를 사용해야 하는 규칙 자체를 없애버리는 코드.

"vue/multi-word-component-names": false

 

적용

{
  // ...
  
  "eslintConfig": {
    // ...
    
    "rules": {
      "vue/multi-word-component-names": false
    }
  },
  
  // ...
}

1번 방식과 마찬가지로 오류가 사라진 것을 확인할 수 있다.

 

 

 

 

 

 

[참조] https://eslint.vuejs.org/rules/multi-word-component-names.html