Vue의 Component 통신 방식 - 1. Props

Vue 컴포넌트 통신 개념

이전 시간에 살펴봤듯 컴포넌트 간에 상호작용이 필요한 경우 통신이 필요합니다.

Props (상위 → 하위)

부모가 자식에게 데이터를 전달하는 방식입니다.

• 방향: 부모 컴포넌트 → 자식 컴포넌트
• 용도: 초기값, 설정값, 표시할 데이터 전달
• 특징: 자식은 받은 데이터를 직접 수정할 수 없음 (읽기 전용)

Event Emit (하위 → 상위)

자식이 부모에게 신호를 보내는 방식입니다.

• 방향: 자식 컴포넌트 → 부모 컴포넌트
• 용도: 버튼 클릭, 입력값 변경 등의 이벤트 알림
• 특징: 데이터와 함께 이벤트를 발생시킬 수 있음

통신 흐름

1. 부모가 Props로 자식에게 데이터 전달
2. 자식이 Event Emit으로 부모에게 응답
3. 이를 통해 양방향 소통 완성

이렇게 단방향 데이터 흐름을 유지하면서도 컴포넌트 간 상호작용이 가능합니다.
그 중에서도 이번 포스트에서는 Props에 대해서 알아보겠습니다.

---

Vue.js Props를 통한 부모-자식 컴포넌트 통신

Vue.js에서 컴포넌트 간 통신은 애플리케이션의 핵심 개념 중 하나입니다. 이번 글에서는 Props를 사용한 부모에서 자식으로의 데이터 전달 방법을 살펴보겠습니다.

Props란?

Props는 Properties의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 Vue.js의 기본적인 방법입니다.

특징

• 단방향 데이터 흐름: 부모 → 자식으로만 전달
• 읽기 전용: 자식 컴포넌트에서 받은 props는 직접 수정 불가
• 반응성: 부모의 데이터가 변경되면 자식도 자동 업데이트

실제 코드 예제

<!-- HTML -->
<div id="app">
     <!-- <app-header v-bind:프롭스이름="상위컴포넌트의 데이터 이름"></app-header> -->
     <app-header v-bind:title="appTitle"></app-header>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                appTitle: '프롭스 넘기기'
            }
        },
        components: {
            'app-header': {
                template: '<h1>{{ title }}</h1>',
                props: ['title']
            }
        }
    }).mount('#app');
</script>

코드 분석

1. 부모 컴포넌트 (Vue 인스턴스)

data() {
    return {
        appTitle: '프롭스 넘기기'  // 전달할 데이터
    }
}

2. Props 전달

<app-header v-bind:title="appTitle"></app-header>

• v-bind:title="appTitle": 부모의 appTitle 데이터를 자식의 title prop으로 전달
• v-bind:는 :로 축약 가능: <app-header :title="appTitle"></app-header>

3. 자식 컴포넌트 (app-header)

'app-header': {
    template: '<h1>{{ title }}</h1>',  // props 사용
    props: ['title']  // 받을 props 정의
}

Props 통신 흐름

부모 컴포넌트 (appTitle: '프롭스 넘기기')
         ↓ v-bind:title="appTitle"
자식 컴포넌트 (props: ['title'])
         ↓ {{ title }}
화면 출력: <h1>프롭스 넘기기</h1>

Props 정의 방법

1. 배열 형태 (간단한 방법)

props: ['title', 'content', 'author']

2. 객체 형태 (권장 방법)

props: {
    title: {
        type: String,
        required: true,
        default: '기본 제목'
    },
    count: {
        type: Number,
        default: 0
    }
}

Props 유효성 검사

props: {
    title: {
        type: String,        // 타입 검사
        required: true,      // 필수 여부
        default: '제목',     // 기본값
        validator: function(value) {
            return value.length > 0;  // 커스텀 검증
        }
    }
}

주의사항

1. Props는 읽기 전용: 자식에서 직접 수정하면 안됨
2. 단방향 데이터 흐름: 부모에서 자식으로만 전달
3. 명명 규칙: HTML 속성은 kebab-case, JavaScript는 camelCase

마무리

Props는 Vue.js 컴포넌트 통신의 기본이 되는 개념입니다. 부모에서 자식으로 데이터를 전달하는 이 단순하지만 강력한 패턴을 통해 재사용 가능하고 유지보수하기 쉬운 컴포넌트를 만들 수 있습니다.

다음 글에서는 자식에서 부모로 데이터를 전달하는 Event Emit에 대해 알아보겠습니다.

---

참고: 이 예제는 Vue 3의 CDN 버전을 사용했습니다. 실제 프로젝트에서는 Vue CLI나 Vite를 사용하는 것을 권장합니다.