자바스크립트에서 IIFE를 이용한 싱글톤 패턴으로 상태 관리하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 초보~중급 자바스크립트 개발자

- 라이브러리/유틸리티 개발자

- 리액트/바벨 등 프레임워크 외부에서 작업하는 개발자

- 경량 상태 관리 솔루션 필요자

핵심 요약

• 싱글톤 패턴 + IIFE를 통해 경량 상태 관리 구현 가능
• configManager.set()/configManager.get() 메서드로 제어된 접근 제공
• 프레임워크 의존 없이 전역 상태/설정 관리 가능 (예: API_BASE_URL, theme, language)

섹션별 세부 요약

1. 문제 상황

• Redux, Zustand 등 상태 관리 라이브러리 사용이 과도한 경우
• 작은 유틸리티, 프레임워크 비종속 위젯, 단순 전역 설정 필요 시
• 전역 변수 사용 시 전역 오염 위험 발생

2. 싱글톤 + IIFE 구현

const configManager = (() => {
  let config = {};
  return {
    set(key, value) { config[key] = value; },
    get(key) { return key ? config[key] : config; }
  };
})();

• IIFE로 블로킹 스코프 생성
• config 객체 비공개 상태 유지
• set/get 메서드로 제어된 접근 제공

3. 사용 예시

• configManager.set("theme", "dark")
• configManager.get("theme") → "dark"
• configManager.get() → { theme: "dark", language: "en" }
• 비동기/리액티브 처리 필요 없음

4. 장점

• 0 의존성, 경량 (라이브러리 불필요)
• 프레임워크 종속성 없음 (리액트/바벨 외부에서도 사용 가능)
• 상태 변경 제어로 불필요한 변동 방지

5. 적용 사례

• 전역 설정 관리: API_BASE_URL, locale, featureToggles
• 테마/언어 설정: dark, light, en, fr
• 라이브러리/위젯 내부 상태 관리

결론

• 경량 상태 관리가 필요한 경우 싱글톤 + IIFE 패턴 사용 권장
• 전역 오염 방지 및 제어된 상태 조작 가능
• React/Redux 사용이 불필요한 프로젝트에 특히 효과적