VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중
sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.
# Vue에서 sync 수식어를 사용하여 컴포넌트 데이터 전달먼저 sync 수식어는 부모와 자식 컴포넌트 사이의
양방향 데이터 바인딩이 가능하도록 해줍니다. 다시말해
부모에서 자식으로 또는 자식에서 부모로 데이터를 변경, 업데이트 할 수 있다는 것입니다.
! sync 양방향 바인딩과 다른 방법의 차이점은?부모와 자식 사이의 데이터를 전달하는 방법은 여러가지가 존재합니다. 예를들어
v-model을 사용할 수도 있고 아니면 props에 값을 변경하기 위해 sitename 이름의 props에 추가로
updateSitename 이벤트를 props로 전달하는 방법도 있습니다. 여러 방법이 있지만 sync를 사용하는
이유는 매우 쉽고 간단하게 사용할 수 있기 때문입니다.
참고1. 상태불변성(immutability)을 고려한다면 부모의 값까지 변경하는 양방향 바인딩은 에러 및 유지보수, 관리 등의 사유로 주의가 필요합니다.참고2. 사실 sync는 부모와 자식 사이의 축약 형태(shortcut)와 동일합니다. 아래의 예제에서 알 수 있듯이 sync를 적용하더라도 자식 컴포넌트에서 값을 변경할 경우 $emit()을 사용해야 하는 것은 동일합니다.다음으로
sync의 간단한 문법을 알아봅니다. sync 수식어가 적용된 아래 코드를 보시면 sync가 얼마나 쉽게 적용했는지 알 수 있습니다.
<child-component :my-sitename.sync="mySitename" />
이처럼 VueJS의 장점에서
sync와 같은 편리한 수식어를 빼놓을 수 없는데요 이처럼 간단한 수식어 사용만으로 siteName이란 props를 부모와 자식 컴포넌트가 서로 동기화하여 사용할 수 있습니다.
! sync 수식어 예제보기그럼 간단한 예제 코드를 살펴보며 어떻게 사용하는지 알아봅니다. 먼저 부모 컴포넌트에 아래와 같이 자식 컴포넌트 child-component를 추가합니다.
@ parentComponent.vue
<template>
<div>
접속중인 {{ mySiteName }} 사이트입니다.
<br />
<child-component :my-sitename.sync="mySitename" />
</div>
</template>
<script>
export default {
data: {
return function() {
mySitename: 'webisfree.com'
}
}
}
</script>
이제 mySitename 이름의 prop를 사용하여 자식 컴포넌트에 'webisfree.com' 데이터 값이 추가되었습니다. 실행하면 아래와 같이 화면에 나타나게 됩니다.
접속중인 webisfree.com 사이트입니다.
webisfree.com
[ 바꾸기 ]
다음으로 자식 컴포넌트 코드입니다.
@ child-component.vue
<template>
<div>
{{ mySitename }}
<br /><br />
<button @click="updateName">[ 바꾸기 ]</button>
</div>
</template>
<script>
export default {
props: [ 'mySitename' ],
methods: {
updateName: function() {
this.$emit('update:mySitename', '');
}
}
}
</script>
자식 컴포넌트에서 살펴볼 부분은 아래 부분 입니다. 아래와 같이 $emit()을 사용하여 값을 업데이트하게 됩니다. 다만 이때 update:propName 형태로 사용해야 합니다.
this.$emit('update:mySitename', '');
이처럼 자식 컴포넌트에서 sync가 적용된 prop의 값을 바꾸기 위해서 다음과 같이 문법을 사용해야 합니다.
this.$emit('update:prop이름', 변경할 값);
이제 버튼을 클릭할 경우 update 함수가 동작하며 부모 컴포넌트에 적용된 mySitename의 값을 빈 값인 ''로 업데이트 하게됩니다.
클릭하면 아래와 같이 webisfree.com이 지워지고 나타나게 됩니다. 부모와 자식 컴포넌트 모두 값이 바뀌었죠. 만약 버튼을 클릭할 경우 아래와 같이 나타납니다.
접속중인 사이트입니다.
[ 바꾸기 ]
이처럼 간단하게 양방향 컴포넌트 사이의 바인딩이 되었습니다. 여기까지 sync 수식어에 대하여 간략하게 알아봤습니다.