17_Props

: 컴포넌트에 각각 데이터를 전달해야할 때 사용할 수 있는 사용자 정의 속성.

 

1. props선언

: 명시적 선언이 필요함 

 

fallthrough 속성

: props또는 emitsdp 명시적으로 선언되지 않은 속성이나 이벤트.(class, id, style..)

- 단일 컴포넌트를 부모 컴포넌트로 전달할 때, 선언되지 않은 속성이나 이벤트는 자동으로 전달 된다.

* 단일 컴포넌트일 때에도 전달하지 않는 방법이 있다 - ingeritAttrs:false)

- 단일 컴포넌트가 아닐때는 그 어떤 fallthrough속성도 전달 되지 않지만, 전달하는 방법도 있음 ( $Attrs 내장 객체를 v-bind속성으로 연결)

 

https://ko.vuejs.org/guide/components/attrs

 

1) 문자열 배열 선언 : 컴포넌트에 props 옵션을 사용하여 선언할 수 있음.

export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}

 

2) 객체문법 선언 : 더 자세히 선언하고자 하면 value에 객체를 선언할 수 있음

{
  // Basic type check
  //  (`null` and `undefined` values will allow any type)
  propA: Number,
  // Multiple possible types
  propB: [String, Number],
  // Required string
  propC: {
    type: String,
    required: true
  },
  // Number with a default value
  propD: {
    type: Number,
    default: 100
  },
  // Object with a default value
  propE: {
    type: Object,
    // Object or array defaults must be returned from
    // a factory function
    default() {
      return { message: 'hello' }
    }
  },
  // Custom validator function
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // Function with a default value
  propG: {
    type: Function,
    // Unlike object or array default, this is not a factory function - this is a function to serve as a default value
    default() {
      return 'Default function'
    }
  }
}

 

 

-type : String, Number, Boolean, Array, Object, Date, Function, Symbol 모든 기본 생성자나 사용자 정의 타입이 올 수도 있음 (Person, Animal)

 

-default : 속성 값이 비어 있거나 undefined를 전달 받는 경우 기본값을 선언할 수 있음. 객체 또는 배열 타입인 경우 기본값을 팩토리 함수를 사용하여 반환해야함.

 

*팩토리 함수 :

함수를 선언해서 함수 내부에서 객체를 생성하여 반환하는 함수. 매개변수를 받아서 새로운 객체를 생성하고 반환하여 동적으로 객체를 생성함.

👉 색상에 관련된 팩토리 함수 

function makeColor(r,g,b){
  const color = { };
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    console.log(this);
    return `rgb(${r}, ${g}, ${b})`;
  }

  return color;
}

const colorList = makeColor(15,20,25);


/*
동작 원리

1. 함수를 호출하고 함수 내부에서 객체를 생성하고 전달받은 매개 변수로 객체의 프로퍼티에 값을 할당합니다.
2. 마지막으로는 color 객체를 반환합니다.
3. rgb() 메서드를 호출하면 사용자가 전달한 색상값을 템플릿 리터럴을 사용해 rgb값으로 반환합니다.
   * 반환하기 이전에 this를 호출하는데, 이유는 this를 구조분해하고 분해된 r,g,b 변수를 반환하기 위함입니다.
*/

👉 this를 이용한 팩토리 함수

function makeColor(r, g, b) {
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;
  color.rgb = function () {
    const { r, g, b } = this;
    return `rgb(${r}, ${g}, ${b})`;
  }

  return color;
}

const colorList = makeColor(15, 20, 25);
const purple = makeColor(35, 200, 250);


/* 
동작원리

1. 동작과정은 위에서 팩토리함수를 생성한 첫 번째 방법과 동일합니다. 
   다만 this를 구조분해하고 분해된 변수를 이용해서 rgb값을 설정하는 방법만 다릅니다.
*/

 

출처 :  https://velog.io/@devp1023/JS.-%ED%8C%A9%ED%86%A0%EB%A6%AC-%ED%95%A8%EC%88%98

- required : 속성이 필수값이면 true로 설정

- validator : 속성값의 유효성검사가 필요할 때

*컴포넌트 사용시 type, required, validator 명시된 사항을 위반하면 콘솔 경고 발생.

 

2. Props 사용법

1) 선언된 props를 <templete>에서 바로 사용.

<template>
	<p>{{ title }}</p>
</template>

 

2) setup() 함수의 첫번째 매개변수로 props객체를 받아 사용함

export default {
	setup(props) {
		return { };
	},
};

 

 

3) 컴포넌트 인스턴스 (this)의 $props 객체로 접근할 수 있음

<template>
	<p>{{ $props }}</p>
</template>
<script>
export default {
	created() {
		// 객체로 접근
		this.$props

		// 
		this.title
	}
};
</script>

 

3.Props 네이밍

: 선언시에는 camelCase (속성 키로 사용할 때 따옴표 없이 사용 가능하므로), 속성값을 전달할 때넨 kebab-case

 

4.다중 속성 전달 :

모든 속성을 props로 전달하려는 경우 v-bind에 전달인자(v-bind:prop-name) 없이 사용할 수 있음.

export default {
	setup() {
		const post = ref({
			id: 1,
			title: 'Learn Vue3'
		})
		return {
			post
		}
	}
}

//이렇게 선언되어 있는 경우

<!-- 객체를 사용한 다중 속성 전달(전달인자 없음) -->
<BlogPost v-bind="post" />

<!--v-bind사용한 경우 -->
<BlogPost :id="post.id" :title="post.title" />

//두 가지 모두 가능함

 

 

5. 단방향 데이터 흐름

: 모든 props는 상위속성과 하위속성 간에 단방향 바인딩으로 형성되어 있음

- 상위속성 업데이트 -> 하위속성 업데이트 (역방향은 안됨) : 상위 컴포넌트가 업데이트 될 때마다 하위 컴포넌트의 모든 props가 업데이트되므로 자식 컴포넌트 내부에서 props 변경하면 안됨

- 하위속성이 변경 실수가 일어 났을 때 상위속성이 변경되어 데이터 흐름을 이해하기 어렵게 하는 것을 방지함

- prop를 하위컴포넌트에서 변경해야하는 경우

 1) 자식컴포넌트에서 속성값을 로컬 데이터 속성으로 사용하고 싶을 때 

export default {
	props: ['initialWidth', 'initialHeight'],
	setup(props) {
		// width는 props.initialWidth 값으로 초기화 됩니다.
		// 향후 props 업데이트의 연결이 끊어집니다.
		const width = ref(props.initialWidth)
		const height = ref(props.initialHeight)
		return {
			width,
			height
		}
	}
}

 

2) prop의 값의 변환이 필요할 때 . computed사용하면 좋음. 상위속성의 변경 유지 가능

export default {
	props: ['size'],
	setup(props) {
		// 향후 props 업데이트의 연결이 유지됩니다.끊어집니다.
		const rectangleSize = computed(() => props.size.trim().toUpperCase());
		return {
			rectangleSize
		}
	}
}

 

 

6. 객체/배열 props 업데이트 

객체나 배열이 props로 전달 되면 자식 컴포넌트에서는 prop바인딩을 변경할 수 없지만 객체 또는 배열 중첩 속성은 변경할 수 있음.

=>단점: 하위컴포넌트가 상위 컴포넌트에 명확하지 않은 방식으로 상위 속성 업데이트 하게 되면 잠재적으로 향후 데이터 흐름을 추론하기 어려움 만약 변경이 필요하면 emit으로 부모컴포넌트가 스스로 변경가능하도록 이벤트를 내보내야함.

 

7. boolean casting 

export default {
	props: {
		disabled: Boolean
	}
}

//MyComponent
<!-- :disabled="true" 전달하는 것과 동일합니다. -->
<MyComponent disabled />

<!-- :disabled="false" 전달하는 것과 동일합니다. -->
<MyComponent />