Vue의 props 자식 컴포넌트로 데이터 전달 | 선언 방법 | Vue3의 setup 내에서 사용하기

props

props는 컴포넌트에 등록할 수 있는 사용자 정의 속성이다.

사용자 정의 속성을 선언하면 이 컴포넌트를 사용하는 부모 컴포넌트에서 데이터(속성)를 전달할 수 있다.

 

 

😆 props 선언

선언 방법1. 문자열 배열 선언

props: ['title']

컴포넌트에 props 옵션을 사용하여 선언

 

선언 방법2. 객체 문법 선언

props: {title: String, likes: Number}

객체 문법을 사용하여 속성 타입과 함께 선언

모든 기본 생성자 또는 사용자 정의 타입을 정의할 수 있다.

 

 

😆 props 속성

default : 기본값 선언, 속성값이 비어있거나 undefined를 전달 받는 경우 기본값 사용.

requied : 속성이 필수 값이라면 true로 설정

validator : 유효성 검사, 명시된 사항을 위반할 때 개발모드에서 콘솔 사고가 발생된다. 

 

 

😆 props 사용

사용 방법1. props 선언 후 사용

{{ title }}

선언한 props는 template에서 바로 사용이 가능하다.

 

사용 방법2. setup함수 내에서 사용

setup(props) { props.title }

 

setup() 함수 내에서 사용하려면 첫번째 매개변수로 props 객체를 받아서 사용한다. 

 

사용 방법3. options api의  $props로 사용

{{ $props }}

options api 에서는 컴포넌스 인스턴스(this)의 $props 객체로 접근 가능

 

 

😆 props의 단방향 데이터 흐름

모든 props 는 단방향 바인딩이다.

즉, 상위 속성이 업데이트되면 하위 속성도 업데이트 되지만 그 반대는 아니다.

그렇기 때문에 자식 컴포넌트에서는 props를 변경하지 않아야 한다.

 

하위에서 변경하려면 event emit을 활용하면 된다.

혹은 하위에서 prop 값의 변환이 필요하면 computed를 사용하자 (상위 속성 유지)

 

근데 하위에서 객체나 배열의 중첩 속성은 변경이 가능하다 ...

왜냐면 자바스크립트의 참조 타입으로 전달되기 때문에 vue에서는 이런 변경을 방지하는 것에 부당한 비용이 든다.

이런 변경의 단점은 데이터 흐름을 망치니까 emit을 이용해서 변경하도록 하자.

 

 

😆 props의 boolean 캐스팅

 props: { flag: Boolean }

boolean 타입을 전달할 때는 특별한 캐스팅 규칙이 있다.

위 코드 처럼 boolean 으로 전달할 때

 

<자식컴포넌트 flag />

이 코드는 :flag='true'로 전달하는 것과 동일하며,

 

<자식컴포넌트 />

 

이 코드는 :flag='false'로 전달하는 것과 동일하게 캐스팅된다.

 

 

😆 props의 네이밍 케이스

export default {
  props: {
    tayLog: String
  }
}
<span>{{ tayLog }}</span>

props 선언할 때는 camelCase를 사용한다.

속성 키로 사용할 때 따옴표를 사용할 필요가 없고,

자바스크립트의 유요한 식별자이기 때문에 템플릿 표현식에서 직접 참조할 수 있음!

 

<자식컴포넌트 tay-log="테이"></자식컴포넌트>

속성에 값을 전달할 때는 kebab-case를 사용한다.