컴포넌트 간 데이터 흐름의 핵심: Props 사용법

Vue.js에서는 컴포넌트 간의 데이터 흐름을 명확하게 관리하기 위해 props라는 기반 구조를 제공합니다. 이는 부모 컴포넌트에서 자식 컴포넌트로 단방향 데이터 전달을 가능하게 하며, 구성 요소의 재사용성과 유지보수성을 높입니다.

Props의 기본 구조

자식 컴포넌트는 props 옵션을 통해 부모로부터 전달받은 값을 정의하고 사용할 수 있습니다. 아래 예제는 문자열 데이터를 전달하는 간단한 사례입니다:

<!-- Parent.vue -->
<template>
  <ChildComponent :text="greetingText" />
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <p>{{ text }}</p>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true,
      default: '기본 메시지'
    }
  }
}
</script>

여기서 :text는 v-bind의 축약형으로, 부모의 greetingText 값이 자식 컴포넌트에 동적으로 전달됩니다.

타입 및 유효성 검증

props는 단순한 값 전달을 넘어 타입 체크와 커스텀 검증을 지원합니다. 이를 통해 오류 발생 가능성을 줄일 수 있습니다:

props: {
  value: {
    type: Number,
    required: false,
    default: 0,
    validator: (val) => val >= 0 && val <= 100
  }
}

위 코드는 value가 숫자이며, 0부터 100 사이의 범위 내에 있어야 한다는 조건을 설정합니다.

동적 데이터 바인딩 활용

템플릿 내에서 정적 값을 사용하는 것 외에도, 반응형 데이터를 바인딩하여 실시간으로 정보를 전달할 수 있습니다:

<template>
  <ChildComponent :content="currentData" :isActive="status" />
</template>

<script>
export default {
  data() {
    return {
      currentData: '업데이트된 내용',
      status: true
    }
  }
}
</script>

이처럼 v-bind를 사용하면 부모의 데이터 변화에 따라 자식 컴포넌트도 자동으로 업데이트됩니다.

주의사항: 변경 금지 원칙

Vue의 설계 원칙상, 자식 컴포넌트 내부에서 직접 props 값을 수정해서는 안 됩니다. 만약 수정이 필요하다면, 해당 값을 data() 내부의 변수로 복제한 후 작업을 수행해야 합니다:

export default {
  props: ['initialValue'],
  data() {
    return {
      localValue: this.initialValue // props 복제
    }
  },
  methods: {
    updateValue() {
      this.localValue += 1 // props는 그대로 유지
    }
  }
}

이렇게 하면 데이터 흐름이 명확해지고, 버그 발생 확률을 줄일 수 있습니다.