Notice
Recent Posts
Recent Comments
Link
SeouliteLab
[Vue.js] Vue 프롭스(props) 이해와 활용하기 본문
프롭스(props)란?
Vue.js에서 프롭스(props)는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하여 자식 컴포넌트에서 사용할 수 있도록 합니다. 이를 통해 컴포넌트 간의 통신을 할 수 있습니다.
예제
아래 예제에서는 부모 컴포넌트에서 자식 컴포넌트로 이름과 나이를 전달하는 예제를 보여줍니다.
부모 컴포넌트 (ParentComponent.vue):
<template>
<div>
<ChildComponent :name="name" :age="age" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
name: '홍길동',
age: 30
};
}
}
</script>
자식 컴포넌트 (ChildComponent.vue):
<template>
<div>
<p>이름: {{ name }}</p>
<p>나이: {{ age }}</p>
</div>
</template>
<script>
export default {
props: {
name: String,
age: Number
}
}
</script>
설명
- 부모 컴포넌트에서
ChildComponent
를 호출할 때:name
과:age
를 통해 데이터를 전달합니다. - 자식 컴포넌트에서는
props
속성을 사용하여 전달받은 데이터를 받습니다. 이때,name
과age
는 자식 컴포넌트에서 사용할 수 있는 변수가 됩니다.
주요 특징
- 단방향 데이터 흐름: 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있습니다.
- 읽기 전용: 자식 컴포넌트에서 전달받은 프롭스를 직접 수정할 수 없습니다. 수정해야 할 경우 부모 컴포넌트에서 데이터를 변경해야 합니다.