Vue에서 컴포넌트와 props는 어떻게 동작하나요?

Question

Accepted Answer

**컴포넌트**는 재사용 가능하고 독립적인 UI 조각입니다. **props**는 부모가 자식에게 데이터를 *아래로* 전달하는 방법입니다 — 자식의 타입이 지정된 읽기 전용 입력입니다. ## 자식에서 props 정의하기 ```vue ``` ## 부모에서 props 전달하기 ```vue ``` 차이에 주의하세요: `name="Ann"`은 리터럴 문자열을 전달하고, `:age="30"`(`v-bind` 사용)은 표현식을 평가합니다 — 숫자, 불리언, 객체, 변수에 필요합니다. 또한 prop 이름은 JS에서는 `camelCase`이지만 템플릿에서는 `kebab-case`입니다(`isAdmin` → `:is-admin`). ## props는 단방향이고 읽기 전용입니다 ```js props.name = "Bob"; // ❌ Vue가 경고함 — prop을 절대 변경하지 마세요 ``` 데이터는 **아래로** 흐릅니다(부모 → 자식). 자식은 자신의 prop을 수정해서는 안 됩니다. 무언가를 변경해야 한다면 로컬 복사본을 사용하거나, **이벤트를 발생시켜** 부모에게 원본을 변경하도록 요청합니다("props는 아래로, events는 위로"). 이 단방향 흐름은 데이터를 예측 가능하게 유지합니다. ## TypeScript props ```vue ``` ## 왜 중요한가 컴포넌트 + props는 Vue 아키텍처의 기초입니다 — 재사용 가능한 컴포넌트로 UI를 구성하고 props로 설정합니다. props가 **단방향이고 읽기 전용**(데이터는 아래로, 이벤트는 위로)이라는 것을 이해하는 것이 Vue 앱을 예측 가능하게 유지하는 핵심 멘탈 모델입니다. prop을 변경하거나 양방향 prop 흐름을 기대하는 것은 전형적인 버그의 원천입니다.