props란 무엇일까?
vuejs에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는 단방향 데이터 전달 방식이다.
정적(Static) / 동적 (Dynamic) 데이터 전달 방식
정적으로 데이터를 전달하는 방법은 말 그대로 전달할 데이터를 직접적으로 명시해 주는 것을 의미한다.
<BlogPost title="My journey with Vue" />동적으로 데이터를 전달하는 방법은 v-bind나 ":"를 사용하여 변수값을 전달하는 방법을 의미한다.
<!-- Dynamically assign the value of a variable -->
<BlogPost :title="post.title" />
<!-- Dynamically assign the value of a complex expression -->
<BlogPost :title="post.title + ' by ' + post.author.name" />물론 데이터 전달에 있어서 문자열뿐만 아니라 모든 유형의 값을 prop에 전달할 수 있다.
자식 컴포넌트에서 데이터 받기
데이터를 받는 두가지 방법이 존재한다.
1. 배열에 이름만 명시해서 데이터 받기
export default {
props: ['foo', 'bar'],
...
}단순하게 부모 컴포넌트에서 전달해준 이름을 배열로 선언해두고 사용하는 방식이다.
2. 타입 설정 그리고 검증
props로 전달받는 데이터의 이름과 타입을 설정할 수 있고, 더 나아가 기본값 설정과 제대로된 데이터가 넘어왔는지 검증 역시 가능하다.
export default {
props: {
// 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. The function receives the raw
// props received by the component as the argument.
default(rawProps) {
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'
}
}
}
}여기서 몇가지 옵션에 대해 설명하자면,
required: true가 설정되어 있는 것은 반드시 필요하다는 의미로 부모 컴포넌트에서 자식 컴포넌트를 사용할 때 반드시 값을 넣어줘야 하는 값이라는 의미이다.
default는 말 그대로 기본값인데, 부모컴포넌트로부터 받은 값이 없으면 이 default값이 설정되며,
validator의 경우에는 자신이 원하는 검사 기능을 별도로 정의해서 값을 검증하는 역할을 한다.
전달 받은 데이터 사용하기 (단방향 데이터 흐름)
일반적으로 props는 부모 컴포넌트에서 자식 컴포넌트로 단방향 데이터 흐름이기 때문에 단지 읽어서 사용하기만 가능하고 수정해서 사용하는 것은 불가능하다.
애초에 가능하다해도 그런 식으로 사용하는 것은 데이터 흐름을 개발자가 이해하기 힘드므로 하지 않는 것을 권장한다.
export default {
props: ['foo'],
created() {
// ❌ warning, props are readonly!
this.foo = 'bar'
}
}그래서 만약 부모컴포넌트로부터 전달받은 데이터를 변경해서 사용하고 싶다면 두 가지 방법이 있다.
1. 다른 변수에 주입해서 사용하기
export default {
props: ['initialCounter'],
data() {
return {
// counter only uses this.initialCounter as the initial value;
// it is disconnected from future prop updates.
counter: this.initialCounter
}
}
}
2. computed 사용해서 계산된 속성 사용하기
export default {
props: ['size'],
computed: {
// computed property that auto-updates when the prop changes
normalizedSize() {
return this.size.trim().toLowerCase()
}
}
}참고: https://vuejs.org/guide/components/props.html
Props | Vue.js
vuejs.org
댓글