[VUEJS] Vue.js Component (props)

WEB개발/VUEJS

[VUEJS] Vue.js Component (props)

wooyeon06 2023. 5. 30. 08:59

Vue.js에서 컴포넌트는 재사용 가능한 UI 요소를 구성하는 빌딩 블록입니다. 컴포넌트는 애플리케이션을 더 작고 독립적인 부분으로 나누어 개발하는 데 도움을 줍니다. 각 컴포넌트는 자체 로직, 상태, 템플릿을 가질 수 있으며 다른 컴포넌트와 조합하여 복잡한 UI를 구축할 수 있습니다.

Vue.js에서 컴포넌트는 Vue.component 메소드를 사용하여 정의됩니다. 컴포넌트 정의는 다음과 같은 구조를 가집니다:

Vue.component('component-name', {
  // 컴포넌트 옵션
  // ...
})

여기서 'component-name'은 컴포넌트의 이름을 나타내는 문자열입니다. 컴포넌트 이름은 HTML 템플릿에서 사용되며, 다른 컴포넌트 내에서 컴포넌트를 사용할 때에도 참조됩니다.

컴포넌트 옵션 객체에는 다양한 옵션을 정의할 수 있습니다. 주요 옵션은 다음과 같습니다:

data: 컴포넌트의 상태 데이터를 정의합니다.
props: 다른 컴포넌트로부터 전달받은 속성(props)을 정의합니다.
computed: 계산된 속성(computed property)을 정의합니다.
methods: 컴포넌트 내에서 사용할 메소드를 정의합니다.
template: 컴포넌트의 UI를 작성하는 HTML 템플릿을 정의합니다.
lifecycle hooks: 컴포넌트의 생명주기 이벤트에 대한 훅(hook)을 정의합니다. 예를 들어, 컴포넌트가 생성되었을 때 실행되는 created 훅이 있습니다.

컴포넌트는 다른 컴포넌트 내에서 중첩될 수 있으며, 부모-자식 관계를 형성할 수 있습니다. 부모 컴포넌트는 자식 컴포넌트에 속성(props)을 전달하여 데이터를 공유하고 상태를 업데이트할 수 있습니다.

컴포넌트의 재사용성은 애플리케이션의 유지 보수 및 개발 생산성을 높이는 데 큰 도움이 됩니다. 컴포넌트 기반 접근 방식은 Vue.js를 통해 더 모듈화된, 재사용 가능

전역등록

이전 섹션에서 다음을 사용하여 새 Vue 인스턴스를 만들 수 있음을 알게 되었습니다.

<div id="example">
  <my-component></my-component>
</div>

// 등록
Vue.component('my-component', {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})

// 루트 인스턴스 생성
new Vue({
  el: '#example'
})

렌더링 결과

<div id="example">
  <div>사용자 정의 컴포넌트 입니다!</div>
</div>

지역 등록

모든 컴포넌트를 전역으로 등록 할 필요는 없습니다. 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수있는 컴포넌트를 만들 수 있습니다

var Child = {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 는 상위 템플릿에서만 사용할 수 있습니다.
    'my-component': Child
  }
})

data 는 반드시 함수여야합니다.

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 데이터는 기술적으로 함수이므로 Vue는 따지지 않지만
  // 각 컴포넌트 인스턴스에 대해 같은 객체 참조를 반환합니다.
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

이런! 세 개의 컴포넌트 인스턴스가 모두 같은 data 객체를 공유하므로 하나의 카운터를 증가 시키면 모두 증가합니다! 대신 새로운 데이터 객체를 반환하여 이 문제를 해결합시다.

data: function () {
  return {
    counter: 0
  }
}

Props

컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기 위한 것입니다. 컴포넌트 A는 자체 템플릿에서 컴포넌트 B를 사용할 수 있습니다.

그들은 필연적으로 서로 의사 소통이 필요합니다. 부모는 자식에게 데이터를 전달해야 할 수도 있으며, 자식은 자신에게 일어난 일을 부모에게 알릴 필요가 있습니다.

Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보냅니다. 어떻게 작동하는지 보겠습니다.

모든 컴포넌트 인스턴스에는 자체 격리 된 범위 가 있습니다. 즉, 하위 컴포넌트의 템플릿에서 상위 데이터를 직접 참조 할 수 없으며 그렇게 해서는 안됩니다. 데이터는 props 옵션 을 사용하여 하위 컴포넌트로 전달 될 수 있습니다.

Vue.component('child', {
  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{ message }}</span>'
})

<child message="안녕하세요!"></child>

HTML 속성은 대소 문자를 구분하지 않습니다.

동적 Props

정규 속성을 표현식에 바인딩하는 것과 비슷하게, v-bind를 사용하여 부모의 데이터에 props를 동적으로 바인딩 할 수 있습니다. 데이터가 상위에서 업데이트 될 때마다 하위 데이터로도 전달됩니다.

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

v-bind에 대한 단축 구문을 사용하는 것이 더 간단합니다.

<child :my-message="parentMsg"></child>

Prop 검증

컴포넌트가 받는 중인 prop에 대한 요구사항을 지정할 수 있습니다. 요구사항이 충족 되지 않으면 Vue에서 경고를 내보냅니다. 이 기능은 다른 사용자가 사용할 컴포넌트를 제작할 때 특히 유용합니다.

props를 문자열 배열로 정의하는 대신 유효성 검사 요구사항이 있는 객체를 사용할 수 있습니다.

Vue.component('example', {
  props: {
    // 기본 타입 확인 (`null` 은 어떤 타입이든 가능하다는 뜻입니다)
    propA: Number,
    // 여러개의 가능한 타입
    propB: [String, Number],
    // 문자열이며 꼭 필요합니다
    propC: {
      type: String,
      required: true
    },
    // 숫자이며 기본 값을 가집니다
    propD: {
      type: Number,
      default: 100
    },
    // 객체/배열의 기본값은 팩토리 함수에서 반환 되어야 합니다.
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 사용자 정의 유효성 검사 가능
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type은 다음 네이티브 생성자 중 하나를 사용할 수 있습니다.

String
Number
Boolean
Function
Object
Array
Symbol

또한, type 은 커스텀 생성자 함수가 될 수 있고, assertion은 instanceof 체크로 만들어 질 것입니다.

props 검증이 실패하면 Vue는 콘솔에서 경고를 출력합니다(개발 빌드를 사용하는 경우). props는 컴포넌트 인스턴스가 __생성되기 전__에 검증되기 때문에 default 또는 validator 함수 내에서 data, computed 또는 methods와 같은 인스턴스 속성을 사용할 수 없습니다.

https://v2.ko.vuejs.org/v2/guide/components.html