Singleton이란?
클래스의 인스턴스를 오직 하나만 만들고, 그걸 재사용하는 패턴이다.
// 인스턴스란 어떤 클래스나 생성자의 결과로 만들어진 객체.
즉, 새롭게 인스턴스를 생성해도 (=클래스 생성자를 호출해도) 결국 같은 인스턴스를 참조한다.
코드와 메모리 구조 그림을 보면서 이해해보자.
Singleton 예제 코드
class Config {
constructor() {
if (Config.instance) { // 인스턴스가 있으면 그대로 반환
return Config.instance;
}
this.setting = "dark mode"; // 그렇지 않으면 인스턴스 생성
Config.instance = this; // 클래스 레벨에서 인스턴스를 참조 (객체 받음)
return this; // 객체 반환
}
}
const c1 = new Config();
const c2 = new Config();
클래스 생성자에서, Config.instance가 존재하는지를 조건문에서 판별한다.
Config.instance는 이름에서 알 수 있듯 클래스 레벨에서 관리하는 속성이다.
Tip!
자바스크립트에서 클래스의 속성을 나타내기 위해 static 키워드를 사용하는데,
Config.instance 역시 클래스 레벨에서 관리되는 static 속성이다.
Config.instance는 인스턴스가 있는지 확인하기 위해 사용되는데, 없으면 인스턴스를 생성하고 참조시켜 줄 것이다.
처음 Config 객체를 생성할 때에는, 인스턴스가 없으므로 그림과 같이 힙 영역에 인스턴스를 생성한다.
Singleton 메모리 구조 그림

생성된 인스턴스를 Config.instance와 c1이 가리키게 된다.
뒤이어 선언된 c2는 인스턴스를 참조하는 Config.instance를 리턴받으므로, 이역시 같은 인스턴스를 참조한다.
즉, 싱글톤은 아무리 생성자를 호출해도 인스턴스가 하나이다!
싱글톤은 이 하나의 객체로 공유 자원을 일관적으로 관리하는 데에 주로 사용된다.
예를 들면 설정 관리, 로깅 시스템, 글로벌 상태 관리, 데이터베이스 연결 관리 등에서 활용된다.
하지만 싱글톤 패턴은 꼭 필요한 곳에만 사용해야 한다. 이는 전역 상태를 관리하기 때문에, 상태 변화에 따른 예기치 않은 동작이 발생할 수 있음에 유의하자.
'프론트엔드 > TAVE-15기' 카테고리의 다른 글
| [React Native] npm 패키지 의존성 충돌(query-string) 해결하기 (0) | 2025.09.04 |
|---|---|
| 웨더타고 - TAVE 15기 연합프로젝트 프론트엔드 회고 (2) | 2025.08.03 |
| [디자인 패턴] 플라이웨이트 패턴 (Flyweight Pattern) (0) | 2025.04.10 |
| [디자인 패턴] 팩토리 패턴(Factory Pattern) - 심플 팩토리, 등록형 팩토리, 팩토리 메소드 (0) | 2025.04.10 |