Vue.js - Props(속성)

Vue.js Props(속성): 컴포넌트 간의 데이터 전달과 효율적인 통신

Vue.js는 컴포넌트 기반의 프레임워크로, 여러 컴포넌트들을 조합하여 웹 애플리케이션을 구축할 수 있습니다. 이때 컴포넌트 간에 데이터를 전달하고 효율적으로 통신하기 위해 Props라는 개념을 사용합니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘을 제공합니다.

Props의 기본 사용

Props를 사용하려면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트에서는 받은 Props를 사용할 수 있습니다.

부모 컴포넌트에서 Props 전달하기

<template>
  <child-component :propName="parentData"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello from Parent!'
    };
  }
};
</script>

자식 컴포넌트에서 Props 사용하기

<template>
  <div>{{ propName }}</div>
</template>

<script>
export default {
  props: {
    propName: String
  }
};
</script>

위의 예제에서 propName이라는 Props를 자식 컴포넌트에서 사용하고 있습니다.

Props의 유효성 검사 (Props Validation)

Vue.js에서는 Props의 유효성을 검사하여 부모 컴포넌트가 올바른 데이터를 전달했는지 확인할 수 있습니다. 이를 통해 코드의 안정성을 높일 수 있습니다.

<script>
export default {
  props: {
    propName: {
      type: String,
      required: true,
      validator: function(value) {
        return value.length <= 10;
      }
    }
  }
};
</script>

위의 예제에서 propName이라는 Props가 String 타입이어야 하며, 반드시 제공되어야 하며, 길이가 10 이하여야 합니다.

동적 Props

Props는 정적일 필요가 없습니다. 동적으로 값을 변경하고 Props를 다시 전달할 수 있습니다.

<template>
  <child-component :propName="dynamicValue"></child-component>
  <button @click="changeValue">Change Value</button>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dynamicValue: 'Initial Value'
    };
  },
  methods: {
    changeValue() {
      this.dynamicValue = 'Changed Value';
    }
  }
};
</script>

위의 예제에서 버튼을 클릭하면 dynamicValue가 변경되고, 이 변경된 값이 자식 컴포넌트로 Props로 전달됩니다.

Props의 활용

Props를 사용하면 컴포넌트 간의 효율적인 통신이 가능해집니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 유효성을 검사하여 안정성을 확보할 수 있습니다. 이를 통해 Vue.js 애플리케이션을 보다 모듈화하고 유지보수하기 쉽게 만들 수 있습니다.

Props를 활용하여 Vue.js 애플리케이션을 더욱 효율적으로 개발해보세요