리액트(React) 싱글톤(Singleton) 패턴, 정말 나쁜 걸까요?

본문에서는 리액트(React)에서 싱글톤(Singleton) 패턴이 전역 상태 관리의 대안으로 제시되지만, 테스트(Test) 및 추적(Track)의 어려움으로 인해 부정적인 인식이 있다고 지적한다. 하지만 싱글톤(Singleton)은 가볍고(Lightweight) 간단하게 구현할 수 있으며, 클래스(Class) 기반 구현을 통해 자바스크립트(JavaScript) 네이티브(Native) 기능 확장이 가능하다는 점을 강조한다.

글에서는 싱글톤(Singleton) 패턴을 구현하기 위해 자바스크립트(JavaScript) 클래스(Class)의 활용을 제안한다. 클래스(Class)는 네이티브(Native) 기능 확장이 용이하며, 별도의 패키지(Package) 의존성 없이 구현할 수 있다는 장점이 있다. 특히, EventTarget 확장을 통해 이벤트(Event) 기반 통신을 구현하여 상태 변화를 효율적으로 관리할 수 있다.

본문에서는 싱글톤(Singleton)의 상태 변화를 UI에 동기화하기 위해 useSyncExternalStore 훅(Hook)을 사용하는 방법을 제시한다. useSyncExternalStore는 외부 상태를 구독하고, 해당 상태의 스냅샷(Snapshot)을 가져오는 기능을 제공하여, 리액트(React) 컴포넌트(Component)와 싱글톤(Singleton) 간의 데이터 동기화(Data Synchronization)를 간편하게 처리할 수 있다.

글에서는 싱글톤(Singleton) 패턴의 실용성을 보여주기 위해 토스트 매니저(Toast Manager) 구현 예시를 제시한다. 토스트 매니저(Toast Manager)는 애플리케이션(Application) 전역에서 접근 가능하며, UI 업데이트(UI Update)를 쉽게 처리할 수 있는 싱글톤(Singleton) 패턴의 장점을 잘 보여준다. 특히, useSyncExternalStore 훅(Hook)을 활용하여 토스트(Toast) 상태 변화를 UI에 실시간으로 반영한다.

싱글톤(Singleton) 패턴은 전역 상태 관리의 간편한 대안이 될 수 있지만, 과도한 사용은 코드 복잡성(Code Complexity)을 증가시킬 수 있다. 따라서 싱글톤(Singleton) 패턴을 적용할 때는 적절한 사용 범위와 설계 원칙을 고려해야 한다. 또한, 싱글톤(Singleton) 패턴은 테스트(Test)의 어려움을 야기할 수 있으므로, 테스트(Test) 용이성을 고려한 설계를 해야 한다.