[Vue.js] 컴포넌트 props 전달하기

이번 포스트에서는 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하여 사용하는 방법에 대해서 다뤄보겠습니다.

 

• 프로젝트이름/src/components/Btn.vue

<template>
  <div class="btn" :class="{ large }" :style="{ backgroundColor: color }">
    {{ text }}
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'JavaScript',
    },
    large: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      defalt: '#000',
    },
  },
};
</script>

<style>
.btn {
  display: inline-block;
  margin: 4px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.btn.large {
  font-size: 20px;
  padding: 10px 20px;
}
</style>

 

• 프로젝트이름/src/App.vue

<template>
  <Btn color="gold" />
  <Btn text="Vue.js" large color="green" />
  <Btn text="React" color="blue" />
  <Btn text="AngularJS" large color="red" />
</template>

<script>
import Btn from './components/Btn';

export default {
  name: 'App',
  components: {
    Btn,
  },
};
</script>

<style></style>

위 예제 코드는 버튼 컴포넌트를 만들어 재사용하는 코드입니다. 간단하게 코드를 설명하겠습니다.

App.vue

• 자식 컴포넌트에 보내는 props는 총 3개 color, large, text입니다.
• color는 내가 어떠한 색을 입힐지 작성해줍니다. 16진수도 가능합니다. CSS에서 색을 표현할 수 있는 수단은 모두 가능합니다. HSL, HSV 등등
• large는 Boolean 타입의 props입니다. 컴포넌트 태그에 large만 작성하면 true로 인식합니다. 만익 large props를 작성하지 않는다면 false로 인식하게 됩니다.
• text는 버튼 안에 출력할 props를 작성해줍니다. 

Btn.vue

• :class 안에 작성되는 props들은 현재 태그에 class를 할당할지 안 할지에 대한 코드입니다.
• :style에 backgroundColor는 CSS의 background-color를 말합니다. 후에 color를 할당하면 부모 컴포넌트로부터 전해져 온 props를 할당받아 적용됩니다. backgroundColor: color(green) = background-color: green
• {{ text }}는 버튼 안에 출력할 글씨입니다. slot 태그를 활용할 수도 있습니다. slot 태그는 따로 글을 작성하겠습니다.

이제 props를 전달받았기에 이를 사용하기 위해서 script 태그 안에 props에 대한 정보를 정의해주어야 합니다.

script - props

• type은 이름 그대로 내가 전달받을 데이터의 type이 어떤 것인지에 대해서 작성해 줍니다. 종류로는 Number, Boolean, Array, Object 등등 있습니다.
• default는 부모 컴포넌트에서 props에 대한 데이터를 작성하지 않았을 경우에 넣어줄 기본값을 작성해줍니다. 따라서 컴포넌트에 large props를 작성하지 않았을 때는 자동으로 false로 인식하게 되는 것입니다.

 

이해하기 어렵다면 부모 컴포넌틑에서는 props를 key=value로 넘겨준다고 생각하면 감이 잡힐 수 있습니다.

부모 컴포넌트<Btn key(color)="value(green)" /> -> 자식 컴포넌트 <div :style="{ CSS속성: 키(color) }"></div>

 

여담

웹 개발에 대해서 공부하며 블로그를 운영을 시작하고 글을 계속써오고 있지만 아직도 글솜씨가 많이 부족하다고 느낀다. 내가 직접 쓴 글을 봐도 잘 읽힌다는 느낌이 안나는데 Vue.js를 처음 공부하는 사람이나 이미 알고있는 사람이 봤을때도 이 글을 보면 '어떤 생각을 할까'라는 생각이든다.

아무생각없이 계속 쓰다보면 발전이 없을 것 같은데 어떻게 작성해야 글솜씨도 늘고 남들이 보면 한눈에 알아볼 수 있을까. 오늘보다 더 나은 내일을 위해서 멘탈을 잡고 힘을 내본다.