VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중 sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.

# sync 수식어를 사용하여 컴포넌트 데이터 전달
먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이터 바인딩이 가능하도록 해줍니다. 다시말해 부모에서 자식으로 또는 자식으로 부모로 데이터를 변경, 업데이트 할 수 있다는 것입니다.
! 양방향 바인딩의 다른 방법은?
물론 sync 수식어외에 다른 방법도 존재합니다. 예를들어 v-model을 사용할 수도 있고 아니면 props에 $emit 이벤트를 사용하여 전달하거나 vuex나 이벤트 버스등의 전역 이벤트를 사용하기도 합니다. 하지만 sync를 사용하는 는 이유는 가장 크게 매우 간단하게 사용할 수 있기 때문입니다.
아래 코드를 보시면 그 이유를 알 수 있습니다.
VueJS의 장점에서 편리한 수식어를 빼놓을 수 없는데요 이처럼 간단한 수식어 사용만으로 siteName이란 prop을 서로 동기화하여 사용하게 됩니다.
! sync 수식어 예제보기
그럼 간단한 예제 코드를 살펴보며 어떻게 사용하는지 알아봅니다. 먼저 부모 컴포넌트에 위와 같이 자식 컴포넌트를 추가합니다.
@ parentComponent.vue
이제 mySitename 이름의 prop를 사용하여 자식 컴포넌트에 'webisfree.com' 데이터 값이 추가되었습니다. 실행하면 아래와 같이 화면에 나타나게 됩니다.
다음으로 자식 컴포넌트 코드입니다.
@ child-component.vue
자식 컴포넌트에서 살펴볼 부분은 아래 부분 입니다.
자식 컴포넌트에서 sync가 적용된 prop의 값을 바꾸기 위해서 위와 같이 사용해야 합니다. 문법은 다음과 같죠.
this.$emit('update:prop이름', 변경할 값);
이제 버튼을 클릭할 경우 updateName 함수가 동작하며 부모 컴포넌트에 적용된 mySitename의 값을 ''인 빈 값으로 업데이트 할 것입니다.
클릭하면 아래와 같이 webisfree.com이 지워지고 나타나게 됩니다. 부모와 자식 컴포넌트 모두 값이 바뀌었죠.
매우 간단하게 양방향 컴포넌트 사이의 바인딩이 되었습니다. 여기까지 sync 수식어에 대하여 알아봤습니다.

# sync 수식어를 사용하여 컴포넌트 데이터 전달
먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이터 바인딩이 가능하도록 해줍니다. 다시말해 부모에서 자식으로 또는 자식으로 부모로 데이터를 변경, 업데이트 할 수 있다는 것입니다.
! 양방향 바인딩의 다른 방법은?
물론 sync 수식어외에 다른 방법도 존재합니다. 예를들어 v-model을 사용할 수도 있고 아니면 props에 $emit 이벤트를 사용하여 전달하거나 vuex나 이벤트 버스등의 전역 이벤트를 사용하기도 합니다. 하지만 sync를 사용하는 는 이유는 가장 크게 매우 간단하게 사용할 수 있기 때문입니다.
아래 코드를 보시면 그 이유를 알 수 있습니다.
<child-component siteName.sync="mySitename" />
VueJS의 장점에서 편리한 수식어를 빼놓을 수 없는데요 이처럼 간단한 수식어 사용만으로 siteName이란 prop을 서로 동기화하여 사용하게 됩니다.
! sync 수식어 예제보기
그럼 간단한 예제 코드를 살펴보며 어떻게 사용하는지 알아봅니다. 먼저 부모 컴포넌트에 위와 같이 자식 컴포넌트를 추가합니다.
@ parentComponent.vue
<template>
<div>
접속중인 {{ mySiteName }} 사이트입니다.
<br />
<child-component :my-sitename.sync="isOn" />
</div>
</template>
<script>
export default {
data: {
return function() {
mySitename: 'webisfree.com'
}
}
}
</script>
<div>
접속중인 {{ mySiteName }} 사이트입니다.
<br />
<child-component :my-sitename.sync="isOn" />
</div>
</template>
<script>
export default {
data: {
return function() {
mySitename: 'webisfree.com'
}
}
}
</script>
이제 mySitename 이름의 prop를 사용하여 자식 컴포넌트에 'webisfree.com' 데이터 값이 추가되었습니다. 실행하면 아래와 같이 화면에 나타나게 됩니다.
접속중인 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>
<div>
{{ mySitename }}
<br /><br />
<button @click="updateName">[ 바꾸기 ]</button>
</div>
</template>
<script>
export default {
props: [ 'mySitename' ],
methods: {
updateName: function() {
this.$emit('update:mySitename', '');
}
}
}
</script>
자식 컴포넌트에서 살펴볼 부분은 아래 부분 입니다.
this.$emit('update:mySitename', '');
자식 컴포넌트에서 sync가 적용된 prop의 값을 바꾸기 위해서 위와 같이 사용해야 합니다. 문법은 다음과 같죠.
this.$emit('update:prop이름', 변경할 값);
이제 버튼을 클릭할 경우 updateName 함수가 동작하며 부모 컴포넌트에 적용된 mySitename의 값을 ''인 빈 값으로 업데이트 할 것입니다.
클릭하면 아래와 같이 webisfree.com이 지워지고 나타나게 됩니다. 부모와 자식 컴포넌트 모두 값이 바뀌었죠.
접속중인 사이트입니다.
[ 바꾸기 ]
[ 바꾸기 ]
매우 간단하게 양방향 컴포넌트 사이의 바인딩이 되었습니다. 여기까지 sync 수식어에 대하여 알아봤습니다.
Author ByEnSSo
네. 도움이 되었어요
아니요. 별로에요