ES6+TypeScript의 getter, setter, 접근제한자 활용하는 방법

JavaScript ES6 부터는 Getter와 Setter를 적용 할 수 있도록 get, set property를 정의 할 수 있는 문법이 추가되었습니다.

JavaScript 개발자들은 get과 set 메소드를 직접 선언하여 직접적인 변수 호출을 피하고, 정보의 은폐와 유지보수성을 강화하기 위해 자체적인 컨벤션을 통해 멤버 변수를 선언하고 이러한 접근 방식을 선호했습니다. 아래는 그 예시입니다.

class LoginModule{
  _loggedIn = false;

  constructor(){};

  getLoggedIn() {
    return this._loggedIn;
  }

  setLoggedIn(value) {
    this._loggedIn = true;
  }
}

위와 같이 _(UnderScore)를 통해 private 를 표현하고자 하였으나 이러한 접근 방식은 강제성이 없어 일관성이 없고 번거로웠습니다.

 

이에 ES6에서는 get, set Property를 도입하여 이러한 접근 방식을 표준화하고 개선하였습니다. TypeScript는 이러한 기능에 더해 접근 제한자인 public, private, protected를 제공하여 객체 지향 프로그래밍의 다양한 측면을 강화하였습니다.

 

먼저 위의 예시를 ES6와 TypeScript가 적용된 코드로 변경해보겠습니다.

class Login {
  private _loggedIn = false;

  get loggedIn() {
    return this._loggedIn;
  }

  set loggedIn() {
    this._loggedIn = true;
  } 
}

get, set 선언 시 멤버 변수와 동일한 이름을 사용하는 경우 충돌이 발생합니다. 따라서 멤버 변수의 맨 앞에 _(UnderScore)를 추가해줍니다.

이 경우 내부에선 _loggedIn을 제어 할 수 있지만, 외부 모듈에선 해당 모듈의 멤버 변수인 _loggedIn을 볼 수 없습니다.

_loggedIn을 제어하기 위해선 아래와 같이 할 수 있습니다.

class Main() {
  const login = new Login();  
  console.log(login.loggedIn)
  // false

  // setter를 통해 LoginModule의 멤버 변수 _loggedIn의 값을 재할당
  login.loggedIn = true;
  console.log(login.loggedIn)
  // true
}

이제 protected 접근 제한자를 살펴보겠습니다. protected 멤버는 해당 클래스와 해당 클래스를 상속받은 하위 클래스에서 접근할 수 있습니다. 이것은 상속 관계에서 부모 클래스의 구현을 자식 클래스에서 재사용할 때 유용합니다.

아래의 예시에서는 간단한 세션 클래스와 이를 로그인 클래스를 구현해보겠습니다. 세션 클래스는 로그인 클래스에서 정의된 protected 멤버에 접근할 수 있습니다.

class Session {
  protected token: string;

  constructor(token: string) {
    this.token = token;
  }

  protected validateToken(): boolean {
    // 세션 토큰 유효성을 검사하는 로직
    if(token) return true;  
  }
}

class Login extends Session{
  private _loggedIn = false;

  constructor(token: string) {
    super(token);
  }

  get loggedIn() {
    return this._loggedIn;
  }

  login(): void {
    if(this.validateToken) {
      this._loggedIn = true;
      console.log("success login")
    } else {
      throw new Error("failed validate token");
    }
  }
}

이제 Login 클래스가 Session 클래스를 상속받아 세션 토큰을 검증할 수 있게 되었습니다. Login 클래스의 생성자에서는 세션 토큰을 받아 부모 클래스인 Session의 생성자를 호출하고, 로그인 메서드에서는 부모 클래스인 Session의 validateToken 메서드를 호출하여 세션 토큰의 유효성을 확인합니다.

이처럼 ES6의 get, set Property와 TypeScript의 접근 제한자를 통해 우리는 보다 견고하고 확장 가능한 코드를 작성할 수 있으며, 객체 지향 프로그래밍의 원칙을 보다 일관되게 적용할 수 있습니다.