Vue.js(3)_State Props

해당 게시글은 2022.07.22에 깃허브로 작성되었으며

여러 강의 블로그를 따라하며 정리한 내용입니다.

---

 

1. State와 Props

우리가 이전에 html을 다뤄서 작업할 때와는 다르게 vue는 document에 직접적인 접근을 하여 DOM을 제어하지 않는다.

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

 

쉽게 말해 state는 나의 data | props는 누구로부터 받는 data이다.

여기서 '누구'는 보통 부모 Component 또는 뒤에서 배울 상태머신(vuex)이다.

 

---

 

2. 프로젝트 생성

제대로 이해하기 위해 예제를 만들어보자.

components 폴더에 Box라는 component 파일을 생성하고 아래와 같이 Box의 넓이와 높이를 data 함수를 이용해 state로 생성 및 저장하자.

// Box.vue
<script>
export default {
  data() {
    return {
      width: 40,
      height: 40
    }
  },
}
</script>

 

---

 

3. v-bind

이제 위에서 생성한 넓이와 높이 data를 이용해서 box를 그려볼텐데

vue에 관련된 무엇인가를 적용할 때에는 v-bind라는 것을 이용해야 한다.

 

예를 들어 html 태그에 인라인으로 style을 적용할 때에는 다음과 같이 v-bind:style 또는 v-bind를 생략한 :style의 형태로 이용한다.

<div v-bind:style="{color: #ebebeb}"></div>
<div :style="{color: #ebebeb}"></div>

 

그럼 Box에 state값을 바탕으로 style을 적용해보자.

<template>
  <div class="box" :style="{width: width + 'px', height: height + 'px'}"></div>
</template>

<style>
  .box {border: 1px solid #000;}
</style>

 

이 Box Component를 App.vue에서 불러온다면 화면에 박스가 만들어지게 된다.

 

이제 여러색상의 박스를 만들어볼텐데 그러기 위해 다음과 같이 색상 class를 추가해보자.

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

 

이 색상 class를 Box별로 적용해주고 싶으면 해당 class들을 Box component를 사용하고 있는 App.vue에서 전달해줘야 한다.

<template>
  <div>
    <Header/>
    <div class="wrap">
      <Menu/>
      <Content/>
    </div>
    <Box color="blue"/>
    <Box color="purple"/>
    <Box color="green"/>
    <Box color="blue"/>
    <Box color="purple"/>
  </div>
</template>

 

Box가 전달받을 값을 props라고 하는데 이는 Box.vue애서 받을 props의 이름과 type을 적어줌으로써 전달받을 수 있다.

이 부분은 Typescript같기도 하다.

// Box.vue
<script>
export default {
  name: 'Box_',
  props: {
    color: String
  },
  data() {
    return {
      width: 40,
      height: 80
    }
  },
}
</script>

 

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

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

 

이제 App.vue에서 내려주는 color값을 넘겨받을 수 있게 됐다.

 

이 값을 Box component에 class로 적용해주면 된다.

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

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

box에 ''를 붙인 이유는 box는 변수와 같은 데이터가 아닌, 문자열이기 때문이다.

 

다시 한번 요약하자면 본인이 가진 data가 state

부모로부터 전달받는 data가 props이다.