같은 레벨 자식에서의 이벤트 핸들링 방법 문의

Question

섹션 3. Vue.js 컴포넌트 - Vue Component 통신방식에서 뷰는 항상 단방향으로(부모 -> 자식 = props, 자식 => 부모 = emit)으로 흐른다고 하셨는데요. 예를들어 A아래 B,C 컴포넌트가 있고, C 화면에 있는 버튼을 클릭하면 B에 어떤 액션이 일어나야한다고 하면 아래와 같이 설계하는게 맞는것인가 궁금합니다. B->A emit 이벤트 발생 A에서 B로부터 전달받은 이벤트 핸들링으로 C에 내리고있는 toggle형 props 값 업데이트 C에서 A에서 내린 props를 watch하고 있다가 값이 변경되면 액션 수행 제가 구상한 방식이 위와같은데 이게 최선인지 궁금합니다.. 다른 좋은 방법이 있다면 조언 부탁드립니다.

juregon2 · Answer

답변 감사합니다

captain · Answer

안녕하세요, 말씀하신 방식으로 watch를 거셔도 괜찮습니다. 다만, C에서 A로 이벤트를 올리고 A에서 업데이트된 데이터를 자연스럽게 B로 흘려 보내주시면 될 것 같아요. 그럼 watch가 필요 없을 것 같네요 :)

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. juregon2님, 질문해주신 Vue 3 컴포넌트간의 통신 문제에 대하여 답변드립니다. 주신 설명대로, Vue에서 데이터는 부모에서 자식으로 단방향 흐름을 따르는 것이 기본 원칙입니다. 자식 컴포넌트에서 부모 컴포넌트로의 통신은 주로 이벤트 발생을 통해 수행됩니다. 같은 레벨의 컴포넌트 간 통신(예: B와 C)에 대한 질문인 경우, 설명해주신 방법이 일반적인 접근 방식 중 하나입니다. 즉, 통신이 필요한 두 컴포넌트(B, C)가 동일한 부모(A)를 공유하는 상황에서: B에서 발생한 이벤트를 A가 감지하게 하고, A는 이를 통해 B 또는 C에 대한 데이터(여기서는 props )를 변경하고, C는 해당 props 의 변경 사항을 감지하여 필요한 액션을 수행합니다. 이는 직접적으로 서로 통신하지 않는 컴포넌트 간에 데이터를 전달하는 Vue의 리액티브 시스템을 활용하는 방법입니다. 다른 방법으로는, 상태 관리 라이브러리(Vuex 등)를 사용하는 방법이 있습니다. 이 경우, 공통 상태를 전역 상태로 관리하면서, B 컴포넌트의 액션이 변경한 상태를 C 컴포넌트에서 감지하고 반응할 수 있습니다. 이 방법은 컴포넌트 간의 결합을 줄이면서도 효율적인 상태 관리를 가능하게 해줍니다. 두 방법 중 상황에 맞는 방법을 선택하시면 됩니다. 전역 상태 관리가 필요하지 않은 간단한 경우에는 첫 번째 방법이 좋을 수 있고, 애플리케이션 규모가 커질수록 또는 여러 컴포넌트 간 상태 공유가 빈번히 필요한 경우에는 Vuex 같은 상태 관리 라이브러리의 사용을 고려해보시는 것이 좋습니다.