# 받은 props 활용하기 KH
# 서론
props전달 및 event 상속 (opens new window)에서 부모와 자식간 데이터 전송에 대해 알아봤습니다.
개발을 하다보니 받은 props를 자식단에서 처리해야 할 경우가 생겼습니다. 원칙대로라면 부모로부터 handler 함수를 받아 처리하는 것이 맞지만 실제 개발에서 사용하다보니 피치 못할 경우들이 있었습니다.
그래서 자식단에서 props로 받은 부모의 값을 어떻게 핸들링했는지 살펴보도록 하겠습니다.
# props 바꾸는 방법
받은 props를 아래처럼 직접 할당하면
<script>
export default {
props: {
list: {
type: Array,
required: true
}
},
computed() {
this.list = this.list.reverse();
}
};
</script>
Vue Error: Avoid Mutating a Prop Directly 이런 직접 할당하지 말라는 에러를 내뿜습니다.
그러면 어떻게 바꿔야 옳게 props를 활용하는지 알아봅시다.
1. 재할당 아닌 props 바꿈 이 방법도 추천하지는 않습니다. react는 이 방법으로 할당하면 에러를 뿜는데 vue는 그냥 넘어가더군요 예시는 아래와 같습니다.
<script>
export default {
props: {
list: {
type: Array,
required: true
}
},
methods: {
deleteList(index) {
//배열의 중간 요소 제거
this.list.splice(index, 1);
}
}
};
</script>
위처럼 props를 재할당 하는 것이 아니라 props 내부를 바꾸는 작업은 허용하였습니다. 하지만 불변성이 어긋남으로 추천하지 않습니다.
2. 값 복사 활용 props로 받은 데이터를 복사하여 활용하는 방법입니다.
<script>
export default {
props: {
list: {
type: Array,
required: true,
},
person: {
type: Object
}
},
created() {
this.copyData = this.list.slice();
this.copyPerson = JSON.parse(JSON.stringify(this.person));
}
computed: {
newData() {
return this.copyData;
},
newPerson(){
return this.copyPerson
}
}
}
</script>
위처럼 배열로 받은 props의 경우 복사하여 그 값을 마음대로 활용할 수 있습니다. 객체인 경우 JSON.parse(JSON.stringify(obj));를 활용하면 복사 가능합니다.
3. computed 활용 props로 받은 값을 computed에서 받아 원하는 방향으로 핸들링합니다.
<script>
export default {
props: {
list: {
type: Array,
required: true
}
},
computed: {
reversedList() {
return this.list.reverse();
}
}
};
</script>
4. 주의사항 위 방법들을 사용할 때, 주의할 점이 있습니다.
- 할당 하는 값이 props와 같은 이름을 사용하지 않는다.
<script>
export default {
props: {
list: {
type: Array,
required: true
}
},
data() {
return {
//중복 이름 사용 금지
list: JSON.parse(this.list)
};
}
};
</script>
# 결론
자식단에서 props를 활용하는 방법에 대해 알아보았습니다.
유념하실 부분은 작업량이 많아지고, 많은 컴포넌트에서 사용할 기미가 보이면 지금껏 작업한것 중지하시고 바로 store 작업 들어가시는 것이 마음 편할 것입니다.
그렇지 않고 몇 줄 안되는 작업이라면 event 버스활용하여 handler 함수를 상속받거나, 자식단에서 받은 props를 값 복사하여 그 값을 활용하시면 됩니다.
