defineProps : props 값 전달하기

 

 

 

개념

props
부모 컴포넌트 -> 자식 컴포넌트로 데이터를 보내는 방법 

 

 

defineProps

: 부모로 부터 받을 데이터를 정의하는 함수 

 

 

 

• 기존에 props 를 정의하는 방식 

export default {
  props: {
    title: String,
    subtitle: String
  }
}

 

 

• <script setup> 문법에서 사용하는 방식

defineProps({
  title: String,
  subtitle: String
})

 

 

<script setup> 은 Vue 3에서 개로 생긴 Composition API 문법이다.
defineProps 함수로 props 를 선언해야 한다 

 

 

 

사용법 

 

보통은 다음과 같이 사룡한다고 한다 

<script setup>
const { title, subtitle } = defineProps({
  title: String,
  subtitle: String
})
</script>

 

 

 

기본값 설정 : default 

defineProps({
  title: {
    type: String,
    default: '기본 제목'
  }
})

 

부모가 값을 넘겨주지 않을 때 기본값 설정 

 

 

 

타입 체크(type) 

• 타입 값은 필수는 아니지만 써주는 것이 좋음
• 에러잡기도 편하고 코드 안정성이 생기기 때문

 

 

필수값 지정 : required

defineProps({
  subtitle: {
    type: String,
    required: true
  }
})

 

부모가 무조건 props를 줘야할 때 사용  

 

(안 줄 경우 콘솔에 에러! )

 

 

 

---

 

 

그 외에도 다른 옵션들이 존재하는데 앞으로  하나하나 알아가보자