[콜럼Vue스] 속성

1. 속성을 이용한 정보 전달

Vue에서는 속성(Props)을 통해 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있음. 이 방식은 상위에서 하위로의 단방향 데이터 흐름을 의미하며, 컴포넌트 간의 재사용성을 높임.

속성 전달 기본 예제 :

// 부모 컴포넌트 (Parent.vue)
<template>
  <ChildComponent :msg="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: '안녕하세요, 자식 컴포넌트!'
    };
  },
  components: { ChildComponent }
};
</script>

// 자식 컴포넌트 (ChildComponent.vue)
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: ['msg']
};
</script>

• 부모 컴포넌트가 자식 컴포넌트에 msg 속성으로 데이터를 전달함.
• 자식 컴포넌트는 props를 사용해 부모로부터 전달된 데이터를 수신함.

---

2. 속성을 이용해 객체 전달하기

Vue에서는 객체를 속성으로 전달할 수 있음. 객체를 통해 더 복잡한 데이터를 전달할 수 있으며, 자식 컴포넌트에서 이 데이터를 참조하여 UI를 구성할 수 있음.

객체 전달 예제:

// 부모 컴포넌트 (Parent.vue)
<template>
  <ChildComponent :user="userInfo" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      userInfo: {
        name: '홍길동',
        age: 30
      }
    };
  },
  components: { ChildComponent }
};
</script>

// 자식 컴포넌트 (ChildComponent.vue)
<template>
  <div>
    <p>이름: {{ user.name }}</p>
    <p>나이: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
};
</script>

 

• 부모 컴포넌트가 객체 형태의 userInfo를 자식 컴포넌트에 전달.
• 자식 컴포넌트는 해당 객체를 활용하여 UI를 구성함.

---

3. 속성의 유효성 검증 (Prop Validation)

Vue에서는 속성의 데이터 타입과 요구 조건을 검증하기 위해 props 옵션에 유효성 규칙을 정의할 수 있음. 이를 통해 예상치 못한 데이터 타입 오류를 방지하고, 코드의 신뢰성을 높임.

유효성 검증 예제:

export default {
  props: {
    msg: {
      type: String,           // 문자열 타입
      required: true,          // 필수 속성
      default: '기본 메시지',  // 기본값 설정
      validator(value) {
        return value.length <= 10;  // 문자열 길이 제한
      }
    },
    user: {
      type: Object,
      required: true,
      validator(value) {
        return value.name && value.age > 0; // 유효성 조건
      }
    }
  }
};

 

설명:

• type: 속성의 데이터 타입을 지정.
• required: 필수 여부를 설정.
• default: 속성이 전달되지 않을 때 사용할 기본값 설정.
• validator: 커스텀 유효성 검증 함수로, 조건이 맞지 않을 경우 경고가 발생함.