[Vue-19]components와 props, 그 못다한 이야기

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Package]Vue.js

https://vuex.vuejs.org/kr/

http://vuejs.kr/update/2017/01/08/using-vue-with-vuex-vue-rotuer/

해당 포스팅에서 props를 아주 간단히 설명하였다.

그런데 props에 대해서 설명이 너무 부실했다.

아주 중요한개념이니 자세히 설명하도록 하겠다.

props - 부모 컴포넌트가 자식 컴포넌트에게에게 하달하는 값

아주아주 간단한 예제로 보도록하자.

<!--Sub.vue-->
<template>
  <div class="sub">
    name : {{name}},
    age : {{age}}
  </div>
</template>

<script>
export default {
  name: 'Sub',
  props: ['name','age'],
  created: function(){
  }
}
</script>

<style scoped>

</style>

자식 컴포넌트이다.

총 2개의 값을 props로 받는다.

이 props는 당연하지만 변수로 사용할 수 있다.

<!--App.vue-->
<template>
    <div id="app">
        <Sub v-bind:name="'kukaro'" :age="27"></Sub>
    </div>
</template>

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

    export default {
        name: 'app',
        components: {
            Sub
        },
        data() {
            return {

            }
        }
    }
</script>

<style>

</style>

App.vue는 Sub컴포넌트를 가져와서 등록하고 이를 사용할 수 있다.

components - 컴포넌트를 등록해서 사용할 수 있다.

App.vue에서 Sub.vue를 사용하라면 단순히 import를 하는것 뿐만아니라,

반드시 components에 등록까지 해줘야한다.

<Sub v-bind:name="'kukaro'" :age="27"></Sub>

이 때 우리는 v-bind, 즉 데이터 바인딩을 할 수 있다.

여기에 대해서 기억이 안난다면 다시 이 포스팅을 보도록 하자.

<Sub :name="'kukaro'" :age="27"></Sub>

위 구문은 이렇게 생략이 가능하다. 특별한 일이 없다면 v-bind는 생략한다.

당연한 결과가 출력된다.

props는 간단하지만 까다로운면도 있다.

props는 readonly이다.

<!--Sub.vue-->
<template>
  <div class="sub">
    name : {{name}},
    age : {{age}}
  </div>
</template>

<script>
    export default {
        name: 'Sub',
        props: ['name','age'],
        created: function(){
            this.props.name = 'hi';
        }
    }
</script>

<style scoped>

</style>

만약에 여러분이 this.props를 바꾸려한다면 이는 성공하지 못한다.

사용해 보면 알겠지만 에러를 뿜어내면서 값이 변하지 않는다.

즉 props는 readonly이며 값을 바꾸고 싶다면 data로 한번 이동시켜주는 작업이 필요하다.

props는 객체로도 표시할 수 있다. 아니 더 넘어서서 객체로 표시하는게 좋다.

props: ['name', 'age'],

props는 위처럼 array로표시하지만 객체로도 표시할 수 있다.

props: {
    name:{},
    age:{}
},

위와 아래는 동일한 코드이다.

그런데 array는 고차원적인 작업을 할 수 없다.

그래서 무조건 객체로 표시하는게 좋은데 그 이유는 아래와 같은 작업들을 할 수 있기 때문이다.

props는 기본값과 타입을 지정할 수 있다. 그리고 데이터의 필수조건을 정할 수 있다.

props: {
    name: {
        type: String,
        required: true,

    },
    age: {
        type: [Number],
    },
    id: {
        type: [String, Number],
        default: 'makarong'
    }
},

예시를 보면 여러가지 상황을 확인할 수 있다.

type - 해당 변수의 타입을 정할 수 있다. 복수개를 정하고 싶으면 array에 넣으면된다. 타입이 미스매치될 경우 에러가 발생한다. 다만 렌더링은 된다.

default - 부모에서 값을 전달해주지 않았을 경우의 기본값을 설정한다.

required - 해당 props를 부모에서 전달해 주지 않았을 때 이 속성이 true라면 에러가 발생한다. 다만 렌더링은 된다.

타입은 필자 생각에는 반드시 정해주는게 좋다.

이 때 타입은 객체를 넘겨야하며 심지어 여러분이 만든 커스텀 객체역시 지정할 수 있다.

우리는 js라는 유연한 언어를 쓰지만 타입이 미스매칭된걸 몰라서 여기서 발생하는 에러역시 상당하다.

그리고 기본값을 정해주는것도 아주 유용하다.

required는 사람의 성향따라 갈리는데 필자는 아주 유용한것 같다.

v-bind를 묶어서 전달 할 수 있다.

이 문법은 호불호가 갈리는데 스타일이 완전히 달라질 수 있기 때문이다.

가령 아래의 예제를 보자.

<Sub :name="'kukaro'" :age="27"></Sub>

위의 예시의 경우에는 props가 단 둘밖에 없다.

그러나 앞으로 여러분이 코딩하다보면 props가 무슨 만리장성 마냥 길어지게된다.

이 때 v-bind문법을 이용해서 묶어서 보낼 수 있다.

<Sub v-bind="{name:'kukaro', age:27}"></Sub>

위 코드와 아래코드는 완전히 동등한 효과를 내게한다.

위의 코드는 또다시 아래처럼 사용할 수 있다.

<!--App.vue-->
<template>
    <div id="app">
        <Sub v-bind="person"></Sub>
    </div>
</template>

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

    export default {
        name: 'app',
        components: {
            Sub
        },
        data() {
            return {
                person: {
                    name: 'kukaro', age: 27
                }
            }
        }
    }
</script>

<style>

</style>

괜찮은 문법이긴 한데 호불호도 갈리고 저렇게 쓰기 까다로운 경우도 있다.

여러분이 편한 방법으로 사용하면 좋을 것이다.