React에서 Event Bus 사용

React에서 이벤트 버스 사용하기

Vue.js에 익숙하다면, 컴포넌트 간 통신을 위해 이벤트 버스를 사용해 본 적이 있을 것입니다. 그렇다면 React에서는 어떻게 하면 다른 컴포넌트에서 어떤 일이 일어날 때 하나의 컴포넌트에서 액션을 트리거할 수 있는 유사한 기능을 구현할 수 있을까요? 이 블로그 포스트에서 React에서 이벤트 버스를 구현하기 위한 다양한 방법을 살펴보겠습니다.

글로벌 함수 레지스터 사용하기

class _EventBus {

  constructor() {
    this.bus = {};
  }

  $off(id) {
     delete this.bus[id];
  }

  $on(id, callback) {
    this.bus[id] = callback;
  }

  $emit(id, ...params) {
    if(this.bus[id])
      this.bus[id](...params);
  }
}

export const EventBus = new _EventBus();

이 접근법에서는 이벤트 버스를 글로벌 함수 레지스터로 생성합니다. 이벤트 버스 클래스는 JavaScript 객체를 사용하여 등록된 이벤트와 연결된 콜백 목록을 유지합니다. $on 메서드는 이벤트 리스너를 등록하고, $off은 리스너를 제거하며, $emit은 이벤트를 트리거하고 해당하는 콜백을 실행합니다.

부모 컴포넌트에서 상태 관리하기

만약 형제 컴포넌트들과 작업 중이라면, 부모 컴포넌트에서 상태를 관리하고 그 상태를 프롭으로 두 형제 컴포넌트에 전달할 수 있습니다:

class ParentComponent extends Component {
  state = {
    specialProp: "bar"
  }

  changeProp = () => {
    // 상태 업데이트
  }

  render() {
    return (
    );
  }
}

이 예시에서, 부모 컴포넌트가 자식 컴포넌트들에서 사용되는 상태와 메서드를 가지고 있습니다. 상태는 부모 컴포넌트에서 업데이트되며, 업데이트된 상태는 형제 컴포넌트들에게 프롭으로 전달됩니다.

CustomEvent API를 사용하여 이벤트 리스너 사용하기

또 다른 접근 방법은 이벤트 리스너와 CustomEvent API를 활용하여 이벤트 버스 아키텍처를 구현하는 것입니다. 다음은 예시입니다:

// event-bus.js 파일

const EventBus = {
  $on(eventType, callback) {
    document.addEventListener(eventType, (ev) => callback(ev.detail))
  },

  $dispatch(eventType, data) {
    const event = new CustomEvent(eventType, { detail: data })
    document.dispatchEvent(event)
  },

  $remove(eventType, callback) {
    document.removeEventListener(eventType, callback)
  }
}

export default EventBus;

이 구현에서 이벤트 버스 객체는 이벤트 리스너를 등록하고, 데이터와 함께 이벤트를 발송하며, 이벤트 리스너를 제거하는 메서드를 제공합니다. 이벤트 버스를 어떤 파일에서든 import하여 커스텀 이벤트를 통해 컴포넌트간에 통신할 수 있습니다.

결론

글로벌 함수 레지스터를 생성하거나 부모 컴포넌트에서 상태를 관리하거나 이벤트 리스너와 CustomEvent API를 사용하는 방법 등 React에서 이벤트 버스를 구현할 수 있는 다양한 방법이 있습니다. 프로젝트 요구 사항에 가장 적합한 접근 방법을 선택하고 컴포넌트 간 통신의 이점을 누리세요.

전역 상태 관리, 컴포넌트 간의 결합도, 성능에 대한 장단점을 고려해야 합니다. 또한, 선택한 방법이 React의 컴포넌트 기반 아키텍처와 일치하며 불필요한 복잡성을 도입하지 않는지 확인해야 합니다.

React에서 이벤트 버스를 구현함으로써 컴포넌트 간의 통신을 강화하고 더 유연하고 상호 작용성 높은 사용자 인터페이스를 만들 수 있습니다. 즐거운 코딩하세요!

참고 자료 :

https://stackoverflow.com/questions/53329773/event-bus-in-react

같은 카테고리의 다른 글 보기 :

reactjs