[JavaScript][Vue]vue에서 부모가 자식에게 값넘길때 이는 값의 복제일까? 참조일까?

vue를 사용하면서 변수를 마구마구 넘기는데 있어서 값을 복제해서 넘기는건지 아니면 참조를 넘기는건지 햇갈리시는 분들이 있다.

js원리로 생각하면 참조를 넘기는게 당연한거 같은데 아닌거 같기도하고...

그래서 이 문제를 해결하기 위해서 예제를 보여드리도록 하겠다.

<!--App.vue-->
<template>
    <div id="app">
        <div class="content">
            <span v-for="(value,key) in arr" :key="key">{{value}}&nbsp;</span><br>
            <input type="text" id="app-input" v-model="data"><input type="button" value="app 추가" @click="appAdd()"/>
            <Sub :init_arr="arr"/>
        </div>
    </div>
</template>

<script>
    import Sub from './components/Sub.vue'

    export default {
        name: 'app',
        components: {
            Sub
        },
        data: function () {
            return {
                arr: [2, 4, 6, 8, 10],
                obj: {'name': 'kukaro', 'age': 27},
                number: 10,
                data: ''
            }
        },
        methods: {
            appAdd() {
                this.arr.push(this.data);
            }
        }
    }
</script>

<style scoped>
    .content {
        background-color: red;
    }
</style>

값을 던질 App.vue의 코드이다.

코드를 내부를 보도록하자.

data: function () {
    return {
        arr: [2, 4, 6, 8, 10],
        obj: {'name': 'kukaro', 'age': 27},
        number: 10,
        data: ''
    }
},

data내부를 보면 arr와 data만 사용할 것이다. 나머지는 참고용으로 만들었는데 안쓴다.

<span v-for="(value,key) in arr" :key="key">{{value}}&nbsp;</span><br>
<input type="text" id="app-input" v-model="data"><input type="button" value="app 추가" @click="appAdd()"/>
<Sub :init_arr="arr"/>

이 코드를 보면 배열의 원소를 출력하는 녀석이 있고 input은 v-model을 사용해서 바로바로 data에 바인딩 시킨다.

버튼을 누르면현재 data값이 arr에 적재된다.

그리고 이는 바로 화면에 다시 출력될 것이다.

<!--Sub.vue-->
<template>
    <div class="sub">
        <span v-for="(value,key) in arr" :key="key">{{value}}&nbsp;</span><br>
        <input type="text" id="app-input" v-model="data"><input type="button" value="app 추가" @click="subAdd()"/>
    </div>
</template>

<script>
    export default {
        name: 'Sub',
        props: {
            init_arr: {}
        },
        data: function () {
            return {
                arr: this.init_arr,
                data: ''
            }
        },
        methods: {
            subAdd() {
                this.arr.push(this.data);
            }
        }
    }
</script>

<style scoped>
    .sub {
        background-color: skyblue;
    }
</style>

Sub.vue역시 마찬가지로 똑같은 로직이다.

여기서 만약 참조가 복사된다면 App.vue에서 수정한게 Sub.vue에서 영향을 미칠 것이다.

값이 복사된다면 App.vue에서 수정한건 Sub.vue에서 영향을 안 미칠 것이다.

그럼 한번 해보자.

결과를 보면 알겠지만 vue는 참조의 복사이다.

값의 복사가 아니므로 값이 중복될일이 없다.

그러므로 마음껏 사용해도 메모리에 큰 문제가 없다.

오히려 경계시 해야하는건 값 자체를 새로 쓰는 것이다.

컴포넌트를 많이 만드는게 값을 새로쓰면 이는 변수로 작용하므로 주의 해야한다.