Vue.js 12가지 모범사례

VueJS가 점점 더 널리 보급됨에 따라 몇 가지 모범 사례가 나타나고 표준이되었습니다.

1. 항상 key를 v-for 의 속성으로 사용하세요.

v-for 지시문과 함께 key 속성을 사용하면 데이터를 조작 할 때마다 애플리케이션이 예측 가능하게 됩니다.

키가 없으면 Vue는 DOM을 최대한 효율적으로 만들려고합니다. 

이는 v-for의 요소가 순서대로 나타나지 않거나 동작이 예측하기 어려울 수 있음을 의미 할 수 있습니다. 

각 요소에 대해 고유 한 키 참조가있는 경우 Vue 애플리케이션이 DOM 조작을 정확히 처리하는 방법을 더 잘 예측할 수 있습니다.

<!-- BAD -->
<div v-for='product in products'>  </div>

<!-- GOOD! -->
<div v-for='product in products' :key='product.id'>

2. 이벤트에 케밥 케이스를 사용하세요.

emit 커스텀 이벤트를 사용하는 경우 케밥 케이스를 사용하는 것이 좋습니다. 

컴포넌트 전체의 일관성을 유지하고 코드를 더 읽기 쉽게하기 위해 두 곳에서 케밥 케이스를 사용하면 됩니다.

this.$emit('close-window')
// then in the parent
<popup-window @close-window='handleEvent()' />

 

3. Props는 camelCase로 사용하고, Templates는 Kebab-Case로 사용하세요.

이 모범 사례는 단순히 각 언어의 규칙을 따릅니다. 

JavaScript에서는 camelCase가 표준이며 HTML에서는 케밥 케이스입니다.

BAD!
<PopupWindow titleText='hello world' /> 
props: { 'title-text': String }

GOOD!
<PopupWindow title-text='hello world' /> 
props: { titleText: String }

 

4. 데이터는 항상 함수를 반환해야 합니다.

컴포넌트 데이터를 선언 할 때 데이터 옵션은 항상 함수를 리턴해야합니다.

그렇지 않은 경우 단순히 객체를 반환하면 해당 데이터가 컴포넌트 데이터의 모든 인스턴스에서 공유됩니다.

BAD!
data: {
  name: 'My Window',
  articles: []
}

그러나 대부분의 경우 재사용 가능한 컴포넌트를 작성하는 것이 목표이므로 각 컴포넌트가 고유한 개체를 반환하기를 원합니다. 

함수 안에 데이터 객체를 반환하여 이를 수행합니다.

GOOD!
data () {
  return {
    name: 'My Window',
    articles: []
  }
}

5. v-for 요소와 함께 v-if를 사용하지 마세요.

배열의 요소를 필터링하기 위해서 v-if를 v-for와 함께 사용하고 싶을 것입니다.

BAD!
<div v-for='product in products' v-if='product.price < 500'>

이에 대한 문제는 Vue.js가 v-if 지시문보다 v-for 지시문의 우선 순위를 정한다는 것입니다.

따라서 루프로 모든 요소를 ​​반복 한 다음 v-if 조건부를 확인합니다.

 

이것은 좋지 않습니다.

 

더 똑똑한 솔루션은 계산 된 속성을 반복하는 것입니다.

위의 예는 다음과 같습니다.

<div v-for='product in cheapProducts'>


computed: {
  cheapProducts: () => {
    return this.products.filter(function (product) {
      return product.price < 100
    })
  }
}

몇 가지 이유로 좋습니다. 

• 모든 항목을 반복하지 않기 때문에 렌더링이 훨씬 효율적입니다.
• 필터링 된 목록은 종속성이 변경 될 때만 다시 계산됩니다.
• 컴포넌트 로직을 템플릿과 분리하여 컴포넌트를 더 읽기 쉽게 만듭니다.

6. Props를 정확하게 검증하세요.

이것은 틀림없이 따라야 할 가장 중요한 모범 사례입니다. 

왜 이것이 중요할까요?

대규모 프로젝트를 설계 할 때 Props에 사용한 정확한 format, type 및 기타 규칙을 잊어 버리기 쉽습니다.

규모가 큰 개발팀에 속한 경우 동료는 독자가 아니므로 컴포넌트를 사용하는 방법을 명확하게 설명하십시오.

따라서 Props의 형식을 결정하기 위해 컴포넌트를 힘들게 추적해야하는 번거로움을 모두 없애고 Props Validatior만 작성하십시오.

Vue 문서에서 이 예제를 확인하십시오.

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

7. 컴포넌트에 PascalCase 또는 Kebab-case 사용하세요.

컴포넌트의 일반적인 이름 지정 규칙은 PascalCase 또는 Kebab-case를 사용하는 것입니다.

어떤 프로젝트를 선택하든 항상 일관성을 유지하는 것이 가장 중요합니다.

PascalCase는 대부분의 IDE 자동 완성 기능이 지원하기 때문에 가장 잘 작동합니다.

# BAD

mycomponent.vue
myComponent.vue
Mycomponent.vue

# GOOD

MyComponent.vue

8. Base 컴포넌트는 Prefix를 붙여야 합니다.

또 다른 명명 규칙은 응용 프로그램 전체에서 공통 스타일을 설정하는데 도움이되는 컴포넌트를 명명하거나 base 컴포넌트에 대한 것입니다.

Vue 스타일 가이드에 따르면 base 컴포넌트는 다음을 포함하는 컴포넌트입니다.

• HTML 요소
• base 컴포넌트
• 서드파티 UI 컴포넌트

가장 모범적인 이러한 컴포넌트의 이름을 지정하는 가장 좋은 방법은 접두사 Base, V 또는 App을 제공하는 것입니다.

프로젝트 전체에서 일관성을 유지하는 한 이들 중 하나를 사용하는 것이 좋습니다.

BaseButton.vue
BaseIcon.vue
BaseHeading.vue

이 이름 지정 규칙의 목적은 기본 구성 요소를 파일 시스템에서 사전 순으로 그룹화하는 것입니다. 

또한 웹팩 가져오기 기능을 사용하여 명명 컨벤션 패턴과 일치하는 구성 요소를 검색하고 Vue 프로젝트에서 모든 구성 요소를 전역으로 자동 가져올 수 있습니다.

9. 한번만 사용되는 컴포넌트 선언은 Prefix 'The'를 붙이십시오.

base 컴포넌트와 마찬가지로 단일 인스턴스 컴포넌트(페이지당 한 번 사용되며 props를 허용하지 않음)에는 자체 명명 규칙이 있습니다.

이러한 컴포넌트는 앱에 따라 다르며 일반적으로 header, sidebar 또는 footer와 같은 것입니다.

TheHeader.vue
TheFooter.vue
TheSidebar.vue
ThePopup.vue

10. 지시자 단축어에 대한 일관성 유지

Vue 개발자들에게 공통적인 기술은 지시문에 단축어를 사용하는 것입니다.

예를 들면 다음과 같습니다.

• @ is short for v-on
• : is short for v-bind
• # is short for v-slot

Vue 프로젝트에서 이러한 단축어를 사용하는 것이 좋습니다. 

그러나 프로젝트 전체에서 일종의 규칙을 만들려면 항상 사용하거나 사용하지 않아야합니다. 

이를 통해 프로젝트를보다 응집력 있고 읽기 쉽게 만들 수 있습니다.

11. created 와 watch 메서드를 호출하지 마세요.

Vue 개발자가 흔히하는 실수는 불필요하게 created와  watch 메소드를 호출한다는 것입니다.

BAD!
created: () {
  this.handleChange()
},
methods: {
  handleChange() {
    // stuff happens
  }
},
watch () {
  property() {
    this.handleChange()
  }
}

바로 watch hook을 사용하고 싶겠지요.

하지만 Vue에는이를 위한 솔루션이 내장되어 있습니다.

그것은 우리가 종종 잊어 버리는 Vue watchers 속성입니다.

1. handler (newVal, oldVal) : watcher 메서드
2. immediate: true : 인스턴스가 생성 될 때 핸들러가 실행됩니다.

GOOD!
methods: {
  handleChange() {
    // stuff happens
  }
},
watch () {
  property {
    immediate: true
    handler() {
      this.handleChange()
    }
  }
}

12. Template 표현식에는 오직 기본 자바스크립트 표현만 있어야 합니다.

템플릿에 최대한 많은 인라인 기능을 추가하는 것이 당연합니다. 

그러나 이렇게하면 템플릿이 덜 선언적이고 복잡해집니다. 

템플릿이 매우 복잡하다는 의미입니다.

BAD!
{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

기본적으로 템플릿의 모든 내용이 표시되는 내용에 대해 직관적이기를 원합니다.

이를 유지하려면 복잡한 표현식을 적절히 명명된 컴포넌트 옵션으로 리팩토링해야합니다.

 

복잡한 표현을 분리하면 얻을 수있는 또 다른 이점은 이러한 값을 재사용 할 수 있다는 의미입니다.

 

GOOD!
{{ normalizedFullName }}


// The complex expression has been moved to a computed property
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

 

 

출처 : https://medium.com/better-programming/12-vuejs-best-practices-for-pro-developers-28d1f629018c