[Vue] State 그리고 Props

이전 시간에 컴포넌트를 구성하는 실습을 진행하였으며

https://co-de.tistory.com/127

[Vue] Vue 컴포넌트 구성해보기

이번 시간에는 State, Props 를 알아보도록 하자!

저자가 이해한 두가지 개념에 대한 정의는 아래와 같으며

State	해당 컴포넌트에서 처리할 데이터를 정의
Props	부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서 받아 사용할 데이터 정의

설명으로는 이해하기 어려우므로 실습을 통해 알아보자!

우선 Box.vue 를 생성한다.

<template>
    <div></div>
</template>

<script>
    export default {
        name: "Box"
    }
</script>

<style scoped>

</style>

이제 해당 box State(상태) 값을 셋팅하는 함수인 data 를 작성하도록 한다.

<script>
    export default {
        name: "Box",
        data(){
            return {
                width: 40,
                height: 80
            }
        }
    }
</script>

설정한 State 값은 v-bind 를 통해 읽어올수 있으며, 스타일을 변경할것이기에 v-bind:style 을 이용하여 width,height State 값을 읽어오도록 한다.

<template>
    <div v-bind:style="{width : width+'px', height: height+'px'}"></div>
</template>

Box 의 형태를 보기 위해 스타일을 지정한다.

<style scoped>
div{
    border: 3px solid pink;
}
</style>

App.vue

<template>
 ...
  <div>
    <Box/>
  </div>
</template>

<script>
  ...
  import Box from "@/components/Box";

export default {
  name: "app",
  components: {
    ...
    Box
  }
}
</script>

Box 컴포넌트를 import 하여 화면에 그려주면 아래와 같이 박스가 생성된것을 볼 수 있다.

이제 Props 를 알아보자!

Props 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용하는 방식이다.

Box 를 여러개 두고 각각 다르게 표현하고 싶다면 최상위 컴포넌트 App.vue 에서 각각 Box 별로 설정해도 되지만

부모에서 모두 처리하는것 보다는

기능별로 자식 컴포넌트를 나누어 해당하는 컴포넌트에서 처리하는것이 유지보수 측면에서도 더 좋기에 Props 를 이용해 자식에서 처리하도록 한다.

Box.vue

<script>
    export default {
        name: "Box",
        data(){
            return {
                width: 40,
                height: 80
            }
        },
        props: {
            text: {type: String, default: "ETC"}
        }
    }
</script>

props 부분을 보면 text 클래스로 전달받을값은 String 타입이며 넘기지 않았을시 default 값은 "ETC" 값을 사용한다라는 뜻이다.

이제 text 값을 받아 박스안에 해당 텍스트를 넣을것이므로 {{[클래스명]}} 을 입력한다.

<template>
    <div v-bind:style="{width : width+'px', height: height+'px'}">
        {{text}}
    </div>
</template>

 이제 부모 컴포넌트에서 text 클래스값을 넘기도록 한다.

App.vue

<template>
  <div>
    <Header/>
  </div>
  <div class="wrap">
    <Menu/>
    <Content/>
  </div>
  <div>
    <Box text="AAA"/>
    <Box text="BBB"/>
    <Box text="CCC"/>
    <Box/>
  </div>
</template>

결과 화면을 보면 정상적으로 나오는것을 볼 수 있다.