Props

props

컴포넌트에 각각 제목이나 내용과 같은 데이터를 전달해야 하는데 이때 Props를 사용하여 컴포넌트로 데이터(속성)를 전달할 수 있습니다.

Props**란? 컴포넌트에 등록할 수 있는** 사용자 정의 속성입니다. 블로그 게시글 컴포넌트에 사용자 정의 속성을 선언하면 이 컴포넌트를 사용하는 부모 컴포넌트에서 데이터(속성)를 전달할 수 있습니다.

문자열 배열 선언

// BlogPost.vue
export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}

객체문법 선언

{
  // Basic type check
  //  (`null` and `undefined` values will allow any type)
  propA: Number,
  // Multiple possible types
  propB: [String, Number],
  // Required string
  propC: {
    type: String,
    required: true
  },
  // Number with a default value
  propD: {
    type: Number,
    default: 100
  },
  // Object with a default value
  propE: {
    type: Object,
    // Object or array defaults must be returned from
    // a factory function
    default() {
      return { message: 'hello' }
    }
  },
  // Custom validator function
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // Function with a default value
  propG: {
    type: Function,
    // Unlike object or array default, this is not a factory function - this is a function to serve as a default value
    default() {
      return 'Default function'
    }
  }
}

• type : String, Number, Boolean, Array, Object, Date, Function, Symbol 모든 기본 생성자 또는 모든 사용자 정의 타입이 올 수 있습니다. (예: Person, Animal)

그리고 [Number, String] 배열을 이용하여 여러개의 타입을 선언할 수 있습니다.

• default : 속성값이 비어 있거나 undefined를 전달 받는 경우 기본값을 선언할 수 있습니다. 그리고 객체 또는 배열 타입인 경우 기본값을 팩토리 함수를 사용하여 반환해야 합니다.
• required : 속성이 필수값이라면 true로 해서 설정할 수 있습니다.
• validator : 속성값의 유효성 검사가 필요할 때 사용할 수 있습니다.

Props 사용

• 선언된 props를 <template>에서 바로 사용할 수 있습니다.
• setup() 함수의 첫 번째 매개변수로 props 객체를 받아 사용할 수 있습니다.
• 컴포넌트 인스턴스(this)의 $props 객체로 접근할 수 있습니다

객체를 사용하여 다중 속성 전달

객체의 모든 속성을 props로 전달하려는 경우 v-bind에 전달인자(예, v-bind:prop-name)없이 사용할 수 있습니다.

export default {
	setup() {
		const post = ref({
			id: 1,
			title: 'Learn Vue3'
		})
		return {
			post
		}
	}
}

<!-- 객체를 사용한 다중 속성 전달(전달인자 없음) -->
<BlogPost v-bind="post" />

<BlogPost :id="post.id" :title="post.title" />

단반향 데이터 흐름

모든 props는 상위 속성과 하위 속성간에 단방향 바인딩으로 형성되어 있습니다. 만약 상위 속성이 업데이트되면 하위 속성도 업데이트되지만 그 반대는 아닙니다. 이러한 성질은 하위 속성 변경 실수로 상위 속성을 변경하여 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.