1. mitt 라이브러리에 대해

• mitt 깃헙 링크
• mitt는 가벼운 이벤트 미터(Event Emitter) 라이브러리임.
• 이벤트 기반 통신을 쉽게 할 수 있게 해주고 보통은 컴포넌트 간 이벤트를 주고받아야 할 때 사용하는데, 복잡한 상태 관리 없이 단순한 이벤트 처리에 유리함.

2. mitt의 장점과 단점

ㄱ. 장점

• 가벼움: mitt는 매우 가벼워서 성능에 부담이 거의 없음. 코드가 복잡해지지 않음.
• 단순성: 몇 줄의 코드만으로 이벤트 등록, 발행, 해제 등을 할 수 있음. 복잡한 상태 관리가 필요 없을 때 유용함.
• 컴포넌트 간 독립성: 이벤트를 통해 컴포넌트 간의 데이터 전달을 쉽게 할 수 있어서 props drilling을 피할 수 있음.

ㄴ. 단점

• 전역 상태 관리 부재: mitt는 단순한 이벤트 기반 통신에 초점을 맞추기 때문에, 상태 관리 기능이 없음. 상태가 필요하면 따로 관리해줘야 함.
• 의존성 추적 어려움: 이벤트가 발생하고 구독하는 부분이 분리되어 있기 때문에, 이벤트 흐름을 추적하기 어려울 수 있음. 특히 규모가 커질수록 디버깅이 까다로워짐.

3. 리액트에서 mitt 사용법

• 리액트에서 mitt를 사용하는 방법은 매우 간단함.
• 이벤트를 발행하는 컴포넌트와 이벤트를 구독하는 컴포넌트를 작성하면 되는데 mitt는 전역적으로 사용할 수 있는 이벤트 버스를 제공하기 때문에, 여러 컴포넌트 간 통신을 손쉽게 할 수 있음.

import React, { useEffect } from 'react';
import mitt from 'mitt';
const emitter = mitt();
function SenderComponent() {
  const handleClick = () => {
    emitter.emit('customEvent', '이벤트 데이터');
  };
  return <button onClick={handleClick}>이벤트 발행</button>;
}
function ReceiverComponent() {
  useEffect(() => {
    const handler = (message) => {
      console.log('받은 이벤트:', message);
    };
    emitter.on('customEvent', handler);
    return () => {
      emitter.off('customEvent', handler);
    };
  }, []);
  return <div>이벤트를 기다리고 있음</div>;
}
function App() {
  return (
    <div>
      <SenderComponent />
      <ReceiverComponent />
    </div>
  );
}
export default App;

• 위 코드에서 SenderComponent는 버튼을 클릭하면 customEvent라는 이벤트를 발행하고, ReceiverComponent는 이 이벤트를 구독해서 처리함. 이벤트를 등록하고 해제하는 과정도 매우 간단함

4. props와의 차이점

• 리액트에서 가장 기본적인 데이터 전달 방법은 props임. - 부모 컴포넌트에서 자식 컴포넌트로 데이터를 내려주는 방식인데, 이때 컴포넌트 간의 계층이 많아지면 props drilling 문제가 발생할 수 있는데, 이때 중간의 컴포넌트들이 그 데이터를 단순히 전달만 하기 위해서 props를 사용할 때 불편함이 커짐.
• mitt는 이벤트 기반으로 데이터를 주고받기 때문에, props처럼 부모-자식 관계를 통해 데이터를 전달하지 않고도 필요한 컴포넌트끼리 데이터를 주고받을 수 있음.
• props는 계층적 구조에 의존하고, mitt는 이벤트 발행과 구독에 의존하는 방식임.
• 간단히 말하면
  props: 부모 → 자식 방향으로 데이터 전달.
  mitt: 컴포넌트 간 독립적으로 이벤트 발생 및 처리.

5. 전역 상태 관리와의 차이점

• 전역 상태 관리 라이브러리(Redux, Zustand 등)와 mitt의 가장 큰 차이점은 상태 관리 여부임.
• 전역 상태 관리 라이브러리는 상태를 저장하고 관리함으로써 여러 컴포넌트가 일관성 있게 동일한 데이터를 사용할 수 있게 해주는데 이때, 상태가 변경되면 해당 상태를 참조하고 있는 모든 컴포넌트가 다시 렌더링됨.
• mitt는 이러한 상태 관리 기능이 없고, 단순히 이벤트 기반 통신만을 제공함. 이벤트를 발행하면 구독하는 컴포넌트가 해당 이벤트에 반응하는 식이라, 상태가 바뀌어도 이를 추적하거나 일관성 있게 관리해주는 기능은 없음.
• 전역 상태 관리: 상태를 저장하고 이를 일관되게 관리함. 상태 변경에 따른 재렌더링이 자동으로 처리됨.
  mitt: 단순한 이벤트 시스템을 제공. 상태를 저장하지 않으며, 단지 이벤트가 발생하고 구독하는 흐름만 제공함.
• 정리하자면 mitt는 가벼운 이벤트 기반 통신에 적합하고, 빠르게 이벤트를 주고받을 때 유리함.
• 전역 상태 관리 라이브러리는 애플리케이션 전체 상태를 관리하고, 상태 변경에 따른 데이터 일관성을 유지하는 데 유리함.
• 따라서 작은 프로젝트나 일시적 이벤트 처리에는 mitt가 유용하고, 복잡한 데이터 흐름 관리나 상태 유지가 필요한 경우에는 전역 상태 관리 라이브러리를 사용하는 것이 더 적합함.