토스트 메시지 구현 방법

토스트 메시지 기능은 React Toastify를 참고하여 구현하였습니다.

토스트 메시지 생성 메커니즘

root.render(
  <React.StrictMode>
    ...
    <ToastContainer />
    ...
  </React.StrictMode>,
);

토스트 메시지를 사용하기 위해서는 App.tsx에서 <ToastContainer /> 컴포넌트를 사용해주어야 합니다. 이 컴포넌트가 마운트된 시점부터 toast 함수를 통해 토스트 메시지를 렌더링하기까지의 과정을 설명하겠습니다.

구성 요소

• ToastConatiner: 토스트 메시지를 렌더링해주는 최상위 컴포넌트
• useToastContainer: 토스트 메시지와 관련된 것들(토스트 메시지 리스트, 토스트 메시지 생성 함수 등)을 관리하는 커스텀 훅
  • buildToast: 토스트 메시지 객체를 생성하여 toastToRender에 추가하는 함수
  • toastToRender: 현재 보여주어야 하는 토스트 메시지 객체들을 관리하는 Map 객체
  • getToastToRender: ToastContainer에서 토스트 메시지를 렌더링하기 위해 toastToRender에 접근할 수 있게 해주는 함수
• EventManager: 토스트 메시지를 추가 및 제거를 위해 싱글톤으로 관리되는 이벤트 관리용 객체. toast 함수를 호출하면 EventManger의 'show' 이벤트에 등록된 함수(buildToast)를 호출합니다.

매커니즘

1. ToastContainer는 커스텀 훅인 useToastContainer 훅을 호출합니다. 이 훅이 마운트되었을 때, EventManager의 'show' 이벤트에 buildToast 함수를 등록해줍니다.
2. 사용자가 toast 함수를 호출하면 EventManager의 'show' 이벤트를 emit 해줍니다.
3. 2번을 통해 buildToast 함수가 호출되어, toastToRender에 새로운 토스트 메시지가 추가됩니다.
4. ToastContainer는 getToastToRender 함수를 통해 toastToRender Map에 있는 토스트 메시지 리스트를 사용자가 볼 수 있도록 렌더링해줍니다.