싱글톤 패턴

Singleton패턴에 대해서는 간단히만 살펴보고 넘어가도록 하겠습니다. 싱글톤 패턴은 소프트웨어 디자인 패턴의 한 종류 입니다. 싱글톤 패턴에서 클래스는 생성자를 여러차례 호출 하더라도 실제로는 처음 생성된 객체 하나이고, 이후 호출 되는 생성자는 앞에서 생성된 동일한 객체를 리턴합니다. 위와 같은 디자인 패턴을 Singleton Pattern이라고 합니다. ES7 이후의 자바스크립트를 이용하면 쉽게 이러한 패턴을 사용할 수 있습니다. 이제 본격적으로 자바스크립트에서 싱글톤 패턴을 이용하는 방법을 알아 보겠습니다.

자바스크립트 ES7이상에서의 SingleTon

ES7버전 부터는 static프로퍼티를 사용할 수 있게 되었습니다. 따라서 flag역활을 하는 instance 정적 프로퍼티를 클래스 안에 포함시킬 수 있게 되었습니다. 아래와 같이 instanceSingleTon 클래스의 생성된 객체를 가리킵니다. 조건 분기를 통해 이미 생성된 인스턴스가 있는경우 이미 생성된 인스턴스를 instance 가 가리키고 있으므로 instancereturn합니다. 만약 그렇지 않은 경우라면 막 생성된 객체를 instance가 가리키도록 만듭니다. 이러한 과정을 통해 하나의 인스턴스만 생성되도록 할 수 있습니다.

singleton.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14

export default class SingleTon {
static instance;

constructor() {
if (SingleTon.instance) {
return SingleTon.instance;
}

SingleTon.instance = this;

}
}

아래는 테스트를 위한 코드입니다.

test.js
1
2
3
4
5
6
7
8

import SingleTon from './SingleTon.js';

let one = new SingleTon();
let theOther = new SingleTon();

console.log(one === theOther); // true

위의 결과는 true가 나오는 것을 확인할 수 있습니다. 이로써 Singleton 클래스의 생성자가 여러번 호출 되었지만 하나의 동일한 인스턴스를 참조하는 것을 확인할 수 있습니다.