[Vue] State와 Props

State와 Props

기존의 Web 생태계는 jQuery를 통해 직접 DOM을 제어했습니다. 하지만 Vue는 DOM을 직접 제어하지 않으며 state라는 상태를 이용하여 DOM을 관리합니다. state는 나의 데이터, Props는 누구로부터 받은 data를 의미합니다.(Props는 보통 부모 component를 의미)

State

예를 들어 App.vue라는 component가 있을 때 width와 height라는 키 값의 데이터를 갖고 있다고 가정하겠습니다.

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

component의 state는 data라는 함수를 이용하여 구성할 수 있습니다. data 함수 안의 모든 값은 Proxy로 변경에 대한 처리가 observable하게 이루어집니다.

Proxy

Proxy는 특정 갬체를 감싸 프로퍼티의 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에 가로채는 객체로 가로채진 작업은 Proxy 자체에서 처리되디고 하고, 원래 객체가 처리하도록 그대로 전달되기도 합니다.

let target = {};
let proxy = new Proxy(target, {});

Proxy는 일반 객체와 다른 행동을 하는 특수객체로 프로퍼티가 없습니다. Proxy의 handler가 비어 있으면 Proxy에 가해지는 작업은 target에 바로 전해지게 됩니다.

observable

data 옵션에 사용되는 state는 Object.defineProperty를 사용하여 getter와 setter를 변환하므로 반응형 데이터로 사용할 수 있습니다.

State를 이용하여 CSS 적용하기

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

Vue에 관련된 속성을 적용할 때는 v-bind를 붙여줘야 하지만 :으로 대신할 수 있습니다.

<template>
	<div :style="{width: `${width}px`, height: `${height}px`}"></div>
</template>

Props

Props는 하나의 컴포넌트가 다르게 동작할 때 사용할 수 있습니다. 우리가 만든 Box component를 사용할 때 Props를 전달할 수 있습니다. 즉 부모 component에서 자식 component에 값을 내려준 것을 Props라고 부릅니다.

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

component에서 props를 사용할 때 type을 적어줌으로써 props에 대한 안정성을 보장할 수 있습니다. 또한 props가 없을 때를 위해 default 값을 설정할 수 있습니다.

props: {
	color: {type: Strung, default: ""}
}

Props로 class bind

부모 component에서 넣어준 color Props를 사용하기 위해서는 아래와 깉이 사용합니다.

<div v-bind:class="{'app': isActive}""></div>
<div :class="{'app': isActive}""></div>

<template>
	<div
    	:class="{'app': isActive}"
        :style="{width: `${width}px`, height: `${height}px`}">
    </div>
</template>

Vue data함수에 정의된 state를 true와 false를 수정하여 해당 값을 추가 또는 수정할 수 있습니다.