Vue에서 데이터 전송 방법은?

💡props, emit을 활용한 방법

부모 자식간에 데이터를 전달하기 위한 props, emit

• Props
  • 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식
• emit
  • 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 통해 데이터를 전달하는 방식
  • $emit 메서드를 사용하여 이벤트를 발생
• 장점
  • 명확한 데이터 흐름 -> 디버깅 용이
  • 컴포넌트 재사용성
  • 타입 체크
• 단점
  • 컴포넌트 트리가 깊어질수록 복잡한 데이터 전달
    ✔️즉, 복잡한 구조에서 사용하기 어려움
  • 직접적인 부모-자식 관계가 없는 컴포넌트 간 통신에는 적합하지 않음
    ✔️즉, 인접한 부모 자식간에만 전달 가능
  • 컴포넌트 간 결합도가 높아질 수 있음

💡Mitt Library를 활용한 방법

Component <-> Mitt <-> Component간 데이터 전송

• vue3에서 이벤트 버스 패턴을 구현하기 위한 경량 라이브러리
• 컴포넌트 간의 직접적인 관계 없이 데이터 전송 가능
• 장점
  • API가 단순하여 빠르게 적용 가능
    ✔️즉, 복잡한 관계에서도 바로 데이터 전송 가능
  • 컴포넌트 간의 직접적인 관계 없이 통신 가능
    -> 유연성
  • TypeScript 지원
• 단점
  • 상태 관리 기능 없음
  • 이벤트가 많아지면 관리 어려울 수 있음(복잡성 증가)
    ✔️ 데이터 흐름 추적 어려움

💡vuex를 통한 방법

Vuex의 State 공간에서 데이터를 관리하고, Component는 State를 주시

• 상태 관리 패턴 및 라이브러리
• 중앙 집중식 저장소를 통해 애플리케이션의 모든 컴포넌트에 대한 상태를 관리하고 예측 가능한 방식으로 상태를 변경할 수 있게 해줌
• 값이 바뀌면 State를 공유하는 모든 Component 값이 변경되어 보임
• 장점
  • 중앙 집중식 상태 관리 → 명확한 데이터 흐름
  • 디버깅 도구를 통해 상태 변화를 쉽게 추적 가능
  • 모듈화를 통해 대규모 애플리케이션의 상태 관리를 구조화
• 단점
  • 작은 프로젝트에서는 오버엔지니어링이 될 수 있음
  • Props, emit, eventbus보다 설정 및 관리가 번거로움