State와 Props

State와 Props

기존의 jQuery와는 다르게 vue는 Document에 직접적인 접근을 하여 DOM을 제어하지 않는다.

대신 state라는 상태를 이용하여 DOM을 관리한다.

 

state로는 나의 data, props는 누구(보통 부모 component 또는 상태머신(vuex)) 로부터 받는 data 인지를 나타낸다.

 

- State

component 의 state 는 data 라는 함수를 이용하여 구성할 수 있다.

 

먼저 Box.vue라는 Box Component를 만든다.

박스의 너비는 40px, 높이는 80px으로 만들 생각이다.

 

// Box.vue 

<script>
export default {
  data() {  // Box 의 state
    return {
      width: 40, // 넓이
      height: 80 // 높이
    };
  }
};
</script>

Box.vue 파일을 components 폴더안에 다음과 같이 만들었다.

 

component의 state는 data라는 함수를 이용하여 구성할 수 있다.

data안의 모든 값은 Proxy로 변경에 대한 처리가 observable하게 이루어진다.

(음... 이게 무슨 의미인지 100% 이해가 되지는 않음. 대충 값이 변경되면 바로 반영된다는 의미인 것 같다)

 

state를 만들었으니 이것을 활용하여 box를 그려보자.

 

vue 에 관련된 무엇인가를 적용하기 위해서는 v-bind 라는 것을 이용해 한다.

html tag 에 인라인으로 스타일을 적용할 때는 v-bind:style 또는 v-bind 를 생략한 :style 를 이용한다.

 

// Box.vue 

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

Box.vue에 다음과 같이 인라인 스타일을 적용한다.

 

width에, 위에 state에서 선언한 data 값을 활용하여 px 단위를 붙여서 활용한다.

(객체지향 개념으로 생각하면 될 듯 싶다. 변경이 가능한 여러 값들을 각각 분리하여 선언하고 필요한 곳에 가져다 쓰는 것)

 

만든 Box를 활용하려면,

App.vue에서 Box를 먼저 import하고 components에 선언한 후 html에 추가해서 사용한다. 

// App.vue 

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

 

- Props

여러개의 Box를 만들기 위해, App.vue에 Box를 여러개 더 추가하려고 한다.

// App.vue 

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

그리고 Box에 색상을 다르게 주려고 한다.

 

// Box.vue 

<style scoped>
.box {
  border: 1px solid #000;
}
.blue {
  background: #009bff;
}
.purple {
  background: #8f46ff;
}
.green {
  background: #00bcac;
}
</style>

다음과 같이 Box.vue에 스타일을 선언한다.

Box 별로 색상을 다르게 주려면,

가장 간단한 방법은 Box component를 사용하는 곳에서 Box component로 사용할 color class를 전달해주면 된다.

 

// App.vue 

<template>
  <div>
    <Box color="blue"/>
    <Box color="purple"/>
    <Box color="green"/>
    <Box color="blue"/>
    <Box color="purple"/>
    <Box />
  </div>
</template>

부모 component인 App.vue에서 내려준 값(Box 입장에서는 이 값을 props라고 부른다)을 어떻게 받아야 할까?

즉, color="blue"라는 속성을 App.vue에서 실제로 쓰려면 어떻게 해야 할까?

 

// Box.vue 

<script>
export default {
  props: {
    color: { type: String, default: "" }
  },
  data() {
    return {
      width: 40,
      height: 80
    };
  }
};
</script>

값을 받을 component 즉 Box.vue 에서 다음과 같이 props 를 이용하여 받을 수 있다.

type 을 적어줌으로써 props 에 대한 안전함을 보장할 수 있다.

해당 props 가 내려오지 않았을 경우를 방지하기 위해 default 값 또한 줄 수 있다.

 

이제 App.vue 에서, color 라는 값을 받을 수 있게 되었다.

이제 내려 받은 값을 Box component 에 class 로 적용해주기만 하면 된다.

props 나 state 를 바탕으로 class 를 적용해주기 위해서는 v-bind:class 또는 :class 를 이용해야 한다.

 

// Box.vue

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

결과)

내려받은 color props 를 바탕으로 Box 의 색상이 변경되었다.

가장 아래에 있는 Box 는 Color 를 내려주지 않았기 때문에 default color 인 #fff 가 적용되었다.

 

 

마무리

state를 활용해서 style을 적용해보고, props로도 style을 적용해보았다.

근데 아직 어떤 경우에 state를 사용하고 어떤 경우에 props를 사용하는지는 모르겠다.

이번에는 그냥 state가 어떤 것인지, props는 어떤 것인지만 알아보는 것으로 마무리한다.

 

---

출처 : https://simplevue.gitbook.io/intro/03.-state-props