99% 똑같은데 1% 다른 Component 만들기 : props

< 공식 문서 >

 

v3.vuejs.org/guide/component-props.html

---

< 사용자 정의 속성 : props > 

우리가 어떠 Component 를 만들었지만,

이 Component 로 생성된 각 Instance 의 모습이 약간씩 틀리기를 바랄수있다.

사과 한상자를 샀는데 사과의 모양이 조금씩 틀린것처럼 말이다.

하나의 Component 안에서 기본적 속성은 공유한채

약간은 틀린 offset 을 주고자할때 사용하는것이 props 이다.

props 는 사용자 정의 속성이다.

내가 만든 Component 를 부모 Component 에서 사용할때,

해당 태그에 속성으로 사용할수있는것이다.

Juce 에서 우리가 Component 를 만들었을때, Constructor 에 인자를 

넘기는것과 유사한 방식으로 보면 될것이다.

<Child color="red"/>

위와 같이 우리가 만든 Child 컴포넌트에 color 속성을 만들고싶다면 어떻게 할수있을까?

<!-- Child.vue -->

<template>
  
    <div id="child">

        <div v-bind:style="state.color">Hello World</div>

    </div>

</template>

<script>

    export default {

        props : { 
            
            color : String // Child 테그 속성으로 color 를 사용해줘!
            
        },
        
        setup(props) {

            const state = { 
                
                color   : { color : props.color } 
                
            }

            return { state }

        }
        
    }

</script>

위의 코드에서 중요한것은,

2가지다.

 

1. props 와 setup() 은 같은 선상에 존재해야만함. 

2. setup() 함수의 인자로 props 를 넘겨야함.

 

이제 App.vue 에 Child 를 로딩후 출력해보자.

<!-- App.vue -->

<template>
  
  <Child color="red"/>
  <Child color="blue"/>
  <Child color="green"/>
  <Child color="yellow"/>

</template>

<script>

  import Child from './components/Child.vue'

  export default {

    components : { Child }

  }

</script>

하지만 경우에 따라, Child 컴포넌트에 사용자가 color 속성을 적지않을수도있다.

이런 경우를 대비해, 

props : { 
            
    color : String 
    
}

대신,

props : { 
    
    color : { type : String, default : 'green' }
    
}

으로 작성하여 color 속성이 넘어오지않았을때의 default 값을 정할수있다.

이때 주의할점은 color : { } 식으로 객체가 되어야한다는것이다.

required 를 사용하여 사용자에게 해당 속성을 반드시 입력하도록 강제할수도있다.

props : { 
    
    color : { type : String, required : true }
    
}

만약, required 와 default 가 둘다 존재한다면 required 는 무시된다.

 

반드시 props 공식문서를 읽어보도록한다.