Vue : Component State Flow

• Props

부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성

 

부모 속성이 업데이트되면 자식으로 전달되지만 그 반대는 안된다.

자식 컴포넌트에서 props 를 변경하는 것은 불가능하다.

또한 부모 컴포넌트가 업데이트 될 때마다 이를 사용하는 자식 컴포넌트의 모든 props가 최신 값으로 업데이트 된다.

→ 부모 컴포넌트에서만 변경하고 이를 내려받는 자식 컴포넌트는 자연스럽게 갱신되도록 하는 방식

 

• One-Way Data Flow

모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 형성한다.

하위 컴포넌트가 실수로 상위 컴포넌트의 상태를 변경하여 앱에서의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지하고 데이터 흐름의 일관성과 단순화를 확보하기 위해 단방향으로 설정한 것!

 

• Props 선언

부모 컴포넌트에서 내려보낸 props 를 사용하기 위해서는 자식 컴포넌트에서 명시적인 props 선언이 필요하다.

 

• Props Name Casing

자식 컴포넌트로 전달 시에는 kebab-case 로 작성한다.

사실 camelCase 도 가능하지만 HTML 속성 표기법과 동일하게 kebab-case 로 표기할 것을 권장한다.

 

선언 및 템플릿 참조 시에는 camelCase 로 작성한다.

 

• $emit()

자식 컴포넌트가 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달하는 메서드

 

• Event Name Casing

자식 컴포넌트에서 선언 및 발신 시에는 camelCase 로 작성하고

부모 컴포넌트에서 수신 시에는 kebab-case 로 작성한다.