props

Vue.js에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이다. 컴포넌트 기반의 프론트엔드 프레임워크에서는 컴포넌트 간의 데이터 흐름이 매우 중요하며, props는 그 중에서도 자식 컴포넌트가 부모로부터 필요한 정보를 받아올 수 있도록 하는 메커니즘이다.

비유를 들자면, 부모가 자식에게 선물을 주는 것과 같다. 부모 컴포넌트가 자식 컴포넌트에 전달할 데이터를 준비하고, 자식 컴포넌트는 그 데이터를 받을 준비를 해야 한다.

예를 들어, 부모 컴포넌트에서 자식 컴포넌트에게 사용자 이름을 전달한다고 가정하자:

<!-- 부모 컴포넌트 -->
<template>
  <ChildComponent userName="홍길동" />
</template>

여기서 부모 컴포넌트는 userName이라는 속성으로 "홍길동"이라는 값을 자식 컴포넌트에 전달한다. 자식 컴포넌트에서는 props를 통해 이 값을 받을 수 있다:

<!-- 자식 컴포넌트 -->
<template>
  <div>
    사용자 이름: {{ userName }}
  </div>
</template>

<script>
export default {
  props: {
    userName: {
      type: String,
      required: true
    }
  }
}
</script>

위의 자식 컴포넌트에서는 props 옵션을 사용하여 userName이라는 프로퍼티를 정의하고 있다. type과 required를 통해 이 props의 데이터 유형과 필수 여부를 지정할 수 있다.

props는 부모와 자식 간의 단방향 데이터 흐름을 유지하며, 이는 데이터의 일관성을 보장하는 데 도움이 된다. 자식 컴포넌트는 전달받은 props를 수정할 수 없으며, 데이터 변경이 필요하다면 이벤트를 통해 부모에게 알려야 한다.