컴포넌트 간 통신 방식 정리 props emit event bus global store 완벽 가이드

🔗 props를 이용한 단방향 데이터 전달

props는 가장 기본적이면서도 널리 사용되는 컴포넌트 간 통신 방식입니다.
상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 활용되며, 단방향 데이터 흐름을 보장합니다.
이 방식은 데이터의 출처를 명확히 하고 디버깅을 쉽게 만든다는 장점이 있습니다.

예를 들어 부모 컴포넌트에서 자식 컴포넌트로 사용자 이름이나 설정 값을 넘길 때 props를 사용합니다.
이때 자식 컴포넌트는 전달받은 props를 직접 수정할 수 없고, 오직 읽기 전용으로만 활용해야 합니다.
만약 수정이 필요하다면 이벤트를 통해 상위 컴포넌트에 알린 후 상태를 갱신해야 합니다.

📌 props 사용 예시

// 부모 컴포넌트
<ChildComponent userName="홍길동" />

// 자식 컴포넌트
props: {
  userName: {
    type: String,
    required: true
  }
}

위 코드처럼 부모에서 `userName`이라는 props를 전달하면, 자식은 이를 받아 화면에 출력하거나 내부 로직에서 활용할 수 있습니다.
이 단순한 구조 덕분에 대부분의 초기 프로젝트에서는 props만으로도 충분히 상태 관리를 이어갈 수 있습니다.

🛠️ emit으로 하위 컴포넌트 이벤트 전달

props가 부모에서 자식으로 데이터를 내리는 방법이라면, emit은 자식이 부모에게 신호를 보내는 방식입니다.
즉, 하위 컴포넌트가 특정 동작을 수행했을 때 상위 컴포넌트에 알려서 반응하도록 만드는 구조입니다.
이로써 양방향 통신이 가능해지고, 데이터 갱신 흐름이 자연스럽게 이어집니다.

예를 들어 자식 컴포넌트의 버튼이 클릭되면 부모에게 “클릭 이벤트가 발생했다”라는 사실을 알리고, 부모는 이를 받아 다른 UI 업데이트나 데이터 처리를 실행할 수 있습니다.
이 방식은 Vue, Svelte 같은 프레임워크에서 자주 사용되며 React에서는 props로 콜백 함수를 내려보내는 방식으로 유사하게 구현됩니다.

📌 emit 사용 예시

// 자식 컴포넌트
<button @click="$emit('clicked')">확인</button>

// 부모 컴포넌트
<ChildComponent @clicked="handleClick" />

methods: {
  handleClick() {
    console.log("자식에서 클릭 이벤트 발생");
  }
}

이 구조를 통해 자식은 직접 부모의 데이터를 수정하지 않고, 단순히 이벤트를 발생시켜 부모가 반응할 수 있도록 돕습니다.
덕분에 데이터의 흐름과 책임 분리가 더욱 명확해집니다.

⚙️ event bus를 활용한 컴포넌트 간 통신

event bus는 독립된 이벤트 관리 객체를 만들어, 여러 컴포넌트 간의 통신을 가능하게 하는 방식입니다.
특히 상위-하위 관계가 없는 컴포넌트 간에도 데이터를 주고받을 수 있다는 점이 큰 장점입니다.
즉, A 컴포넌트에서 이벤트를 발생시키고, 전혀 다른 위치의 B 컴포넌트가 그 이벤트를 수신하는 구조를 만들 수 있습니다.

Vue 2 시절에는 event bus 패턴이 널리 사용되었으며, React에서도 유사한 방식으로 Node.js의 EventEmitter나 외부 라이브러리를 활용해 구현할 수 있습니다.
규모가 작은 프로젝트에서 빠르게 컴포넌트 간 연결을 만들 때 유용하지만, 규모가 커질 경우 이벤트 흐름이 복잡해져 추적이 어려워질 수 있습니다.

📌 event bus 사용 예시

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// A 컴포넌트
EventBus.$emit('custom-event', { message: "Hello!" });

// B 컴포넌트
EventBus.$on('custom-event', (data) => {
  console.log(data.message);
});

위 예시는 Vue에서 event bus를 활용한 가장 기본적인 패턴입니다.
A 컴포넌트가 이벤트를 발생시키면, B 컴포넌트가 해당 이벤트를 수신하여 동작을 실행합니다.
이처럼 간단한 구조에서는 매우 편리하지만, 관리 포인트가 많아지면 디버깅이 어려워질 수 있습니다.

🔌 global store 상태 관리의 장점

global store는 프로젝트 전역에서 사용할 수 있는 상태 저장소를 두고, 필요한 컴포넌트들이 해당 저장소에 접근해 데이터를 읽거나 수정하는 방식입니다.
대표적인 예시로는 React의 Redux, Vue의 Vuex, Pinia, Svelte의 Store가 있습니다.
이 방식은 대규모 프로젝트에서 데이터 일관성을 유지하고, 컴포넌트 간 복잡한 의존성을 줄여주는 강력한 도구입니다.

예를 들어 로그인 상태, 사용자 프로필, 쇼핑 카트 데이터처럼 여러 화면에서 동시에 사용되는 값들을 global store에 저장하면, 각 컴포넌트는 동일한 소스에서 데이터를 가져와 사용하게 됩니다.
이를 통해 데이터의 단일 출처(Single Source of Truth)를 보장하고, 버그 발생 가능성을 줄일 수 있습니다.

📌 global store 사용 예시

// Redux 예시
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

이처럼 전역 상태를 관리하는 도구를 사용하면, 특정 데이터가 어디서 변경되었는지 추적하기 쉽고, 테스트 코드 작성도 수월해집니다.
또한 규모가 커질수록 유지보수에 큰 도움이 됩니다.

• 📌전역에서 공통 데이터를 관리할 수 있다
• 📌데이터 흐름과 변경 내역을 쉽게 추적할 수 있다
• 📌규모가 큰 프로젝트에서도 안정적인 상태 관리를 보장한다

💡 상황에 맞는 통신 방식 선택 가이드

컴포넌트 간 통신 방식은 프로젝트 규모, 데이터 복잡도, 컴포넌트 구조에 따라 달라져야 합니다.
모든 상황에 만능으로 적용되는 방법은 없으며, 상황에 맞게 적절히 선택하는 것이 가장 중요합니다.
각 방식을 잘 이해하고 조합해 활용한다면 훨씬 더 깔끔하고 유지보수하기 좋은 코드를 만들 수 있습니다.

📌 선택 기준 요약

위 표처럼 단순한 UI에서는 props와 emit만으로도 충분하지만, 프로젝트가 확장되면 event bus나 global store가 필요합니다.
특히 팀 단위 협업에서는 데이터 흐름이 명확해야 하므로 상태 관리 도구의 도입이 필수에 가깝습니다.

❓ 자주 묻는 질문 (FAQ)