서론
React를 배우면서 공식문서에서도 권장하면서 사람들과의 암묵적인 룰 같은 스타일 가이드가 Vue에도 있습니다.
React에서는 파일이름, 컴포넌트이름 2개의 명사가 붙어있으면 (camelCase)이름으로 작성하고 API키 같은 경우는 대문자로 작성 등 있었습니다.
본론
우선순위 A: 필수(오류 방지)
1. 여러 단어로 된 컴포넌트 사용
// 나쁨
<!-- in pre-compiled templates -->
<Item />
<!-- in in-DOM templates -->
<item></item>
// 좋음
<!-- in pre-compiled templates -->
<TodoItem />
<!-- in in-DOM templates -->
<todo-item></todo-item>
2. 자세한 Prop 정의 사용
// Even better!
props: {
status: {
type: String,
required: true,
validator: value => {
return [
'syncing',
'synced',
'version-conflict',
'error'
].includes(value)
}
}
}
3. v-for에 key 사용
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
4. v-if와 v-for를 같이 사용하지 않기
Vue가 지시문을 처리할 때 v-if는 v-for보다 우선순위가 높으므로 이 템플릿이 적용됩니다.
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
즉, 이러한 경우 if문이 먼저 실행이 되지만 user가 존재하지 않기 때문에 오류가 발생합니다.
<ul>
<template v-for="user in users" :key="user.id">
<li v-if="user.isActive">
{{ user.name }}
</li>
</template>
</ul>
이렇게 따로 사용해서 for문이 먼저 실행되게 합니다.
4. 컴포넌트 범위 스타일링 사용
이는 싱글 파일 컴포넌트에만 해당됩니다. 반드시 scoped 속성을 사용할 필요는 없습니다.
범위 지정은 CSS 모듈, BEM과 같은 클래스 기반 전략 또는 다른 라이브러리/규약을 통해 이루어질 수 있습니다.
그러나 컴포넌트 라이브러리는 scoped 속성을 사용하는 대신 클래스 기반 전략을 선호해야 합니다.
이렇게 하면 내부 스타일을 재정의하기가 더 쉬워지며, 사람이 읽을 수 있는 클래스 이름은 너무 구체적이지는 않지만 충돌이 발생할 가능성은 매우 낮습니다.
간단한 예시로는 btn, btn-close 같은 이름을 사용해도 상관없지만 전역적으로 사용하는 컴포넌츠에 대해서는 구체적으로 사용했으면 좋겠다는 이야기 입니다. button-modal, button-modal-close 이런식으로 만들면 될 것 같습니다.
우선 순위 B: 강력 추천
디렉토리, 파일, 컴포넌트 구조 및 이름
- 빌드 시스템에서 파일을 연결할 수 있는 경우 각 컴포넌트는 자체 파일에 있어야 합니다.
- 싱글 파일 컴포넌트의 파일명은 항상 파스칼 케이스이거나 항상 케밥 케이스여야 합니다. (MyComponent, my-component)
- 앱별 스타일과 규칙을 적용하는 기본 컴포넌트(프레젠테이션, 덤 또는 순수 컴포넌트라고도 함)는 모두 Base, App 또는 V와 같은 특정 접두사로 시작해야 합니다.
- 기본 컴포넌트 이름은 접두사로 Base, The, V를 사용하며 단일 인스턴스 컴포넌트 이름은 접두사로 The를 붙입니다.
- 부모 컴포넌트와 긴밀하게 결합된 자식 컴포넌트는 부모 컴포넌트 이름을 접두사로 포함해야 합니다.(TodoList, TodoListItem)
- 컴포넌트 이름 내 단어 순서는 가장 일반적인 단어(Submit)로 시작하고 설명적인 수정 단어(Button)로 끝나야 합니다.
사실 우선 순위 B에는 엄청 많이 존재하지만 간단하게 요약하면
연결된 컴포넌트 경우 같은 디렉토리를 사용하고 이름은 파스칼 케이스, 케밥 케이스 사용
전역적으로 재사용 가능한 모듈화 된 컴포넌츠는 Base, The, V를 접두사로 사용
부모 자식이 존재하는 컴포넌트는 부모의 이름을 사용하고 뒤에 추가적인 설명을 접미사로 사용
컴포넌트 이름은 설명(동사) + 설명적인 수정 단어(명사의 합)
셀프 클로징 함수
<!-- In Single-File Components, string templates, and JSX -->
<MyComponent/>
<!-- In in-DOM templates -->
<my-component></my-component>
이렇게만 나와있어서 모르겠지만 이렇게 사용하라고 합니다.
import MyComponent from './MyComponent.vue'
파스칼케이스 컴포넌트는 그대로 이름 바꾸지 말고 사용 케밥케이스 역시 이름 그대로 사용
약어 사용하지 말고 완전한 단어를 사용해서 컴포넌트이름 짓기
Props이름은 카멜케이스 추천 다만 케밥케이스 이름을 가진 컴포넌트인 경우 케밥 케이스로 사용
다중속성 요소를 갖고 있으면 띄어쓰기보단 엔터 사용 아래 방법으로
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
진짜 우선순위 C, D도 있지만 이정도만 알아도 될 것 같습니다....
