47. Communicating Between Components

npm create vue@latest

컴포넌트 사이에서 데이터를 전달하는 방법

컴포넌트 내에 있는 데이터는 해당 컴포넌트에 속합니다.
따라서 동일한 속성 이름을 가진 두 컴포넌트가 있어도 이름 충돌에 대해 걱정할 필요가 없습니다.
어떤 시나리오에서는 이 방식이 유용하지만, 컴포넌트 간에 데이터를 전달해야 하는 경우도 있습니다.
예를 들어, A 컴포넌트가 B와 C 컴포넌트의 부모 컴포넌트이며, B와 C 컴포넌트는 서로 형제 컴포넌트입니다.
이 예시에서는 App, Greeting, User라는 세 개의 컴포넌트를 사용합니다.
User 컴포넌트에는 age라는 속성이 있고, Greeting 메시지는 User의 age에 따라 달라집니다.
User 컴포넌트에 있는 age를 Greeting 컴포넌트로 전달해야 하는데, Vue는 형제 컴포넌트 간에 직접 데이터를 전달할 방법을 제공하지 않습니다.
데이터를 공유하는 실제 해결책은 App 컴포넌트 내에 데이터를 저장하는 것입니다.
부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달할 수 있습니다.
따라서, 부모 컴포넌트에 데이터를 저장하고, 필요한 컴포넌트에 데이터를 전달합니다.
컴포넌트로 전달되는 데이터는 props라고 불립니다.
props는 컴포넌트에 데이터를 추가하는 또 다른 방법입니다.
다음 강의에서는 props를 사용하는 방법을 배울 예정입니다.