Passing Props
Props
-
Props: 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성
-
Props 특징:
부모 속성이 업데이트 되면 자식으로 전달되지만 그 반대는 안됨
즉, 자식 컴포넌트 내부에서 props를 변경하려고 시도해서는 안되며 불가능
또한 부모 컴포넌트가 업데이트될 때마다 이를 사용하는 자식 컴포넌트의 모든 props가 최신 값으로 업데이트 됨
=> 부모 컴포넌트에서만 변경하고 이를 내려 받는 자식 컴포넌트는 자연스럽게 갱신 -
One-Way Data Flow: 모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 형성 (one-way-down binding)
-
단방향인 이유:
하위 컴포넌트가 실수로 상위 컴포넌트의 상태를 변경하여 앱에서의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지하기 위함
=> 데이터 흐름의 일관성 및 단순화
Props 선언
-
Props 선언: 부모 컴포넌트에서 내려 보낸 props를 사용하기 위해서는 자식 컴포넌트에서 명시적인 props 선언이 필요
-
Props 작성: 부모 컴포넌트 Parent에서 자식 컴포넌트 ParentChild에 보낼 props 작성
-
Props 선언:
defineProps()를 사용해 props 선언
defineProps()에 작성하는 인자의 데이터 타입에 따라 선언 방식이 나뉨
-
Props 선언 2가지 방식
1) 문자열 배열을 사용한 선언
- 배열의 문자열 요소로 props 선언
- 문자열 요소의 이름은 전달된 props의 이름
2) 객체를 사용한 선언
- 각 객체 속성의 키가 전달받은 props 이름이 되며, 객체 속성의 값은 값이 될 데이터의 타입에 해당하는 생성자 함수(Number, String...)여야 함
-
props 데이터 사용
-
한 단계 더 props 내려 보내기
Props 세부사항
- Props 세부사항
1) Props Name Casing (Props 이름 컨벤션)
2) Static Props와 Dynamic Props
Props 활용
Component Events
Emit
-
$emit(): 자식 컴포넌트가 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달하는 역할의 메서드
-
emit 메서드 구조
이벤트 발신 및 수신
emit 이벤트 선언
이벤트 전달
- 이벤트 인자 (Event Arguments): 이벤트 발신 시 추가 인자를 전달하여 값을 제공할 수 있음
이벤트 세부사항
emit 이벤트 활용
참고
