Lsiron

Type Script 의 protected 와 static 본문

언어/Type Script

Type Script 의 protected 와 static

Lsiron 2024. 7. 16. 16:19

protected와 static에 대해 알아보기 전 에 먼저 class를 복사하는 방법에 대하여 알아보자.

 

class를 복사하려면 extends를 붙이면 된다.

class Lsiron {
    x= 10;
}

class NewLsiron extends Lsiron {

}

let siron = new NewLsiron();
console.log(siron); // NewLsiron {x: 10} 출력

 

 

TypeScript에서 protected와 static 키워드는 클래스 멤버의 특성을 정의할 때 사용된다.

protected는 클래스와 그 하위 클래스에서 접근 가능한 멤버를 정의하고, static은 클래스 자체에 속하는 멤버를 정의한다.

 

protected 이란?

클래스 내부와 하위(extends) 클래스에서만 접근 가능한 멤버를 정의하며, 외부에서는 접근할 수 없다.

class Lsiron {
    protected x= 10;
}

 

protected는 private과 많이 유사하다. protected 또한 속성에 붙여주면 해당 속성은 class {} 안에서만 사용이 가능하다.

 

private과의 차이점은 protected는 약간의 확장성을 더해준다. 

class Lsiron {
   protected x = 10;
}

class NewLsiron extends Lsiron {
   iron() {
     this.x = 20;
   }
   
   // x 값을 출력하기 위한 메서드 추가
   getX() {
     return this.x;
   }
}

let siron = new NewLsiron();
console.log(siron); // NewLsiron { x: 10 } 출력

// iron 메서드 호출
siron.iron();
console.log(siron.getX()); // 20 출력

 

private은 extends 를 적용한 클래스에서 사용할 수 없지만, protected를 사용하면 extends 를 적용한 클래스에서도 사용할 수 있다.

 

정리하자면,

  • protected - extends된 class : 사용가능, 자식들 : 사용불가능.
  • private - extends된 class : 사용불가능, 자식들 : 사용불가능.

위와 같다.

 

protected 사용 시기

  • 상속 관계에서 멤버 보호: 하위(extends) 클래스에서 접근이 가능하지만, 외부에서는 접근할 수 없도록 멤버를 보호할 때 사용한다.
  • 실생활 예시: 은행 계좌 시스템에서 기본적인 입출금 기능을 protected로 정의하여 하위(extends) 클래스에서만 접근 가능하도록 한다.

 

static 이란?

클래스의 인스턴스(자식)가 아닌 클래스 자체에 속하는 멤버를 정의한다. 따라서 클래스의 인스턴스(자식)를 생성하지 않고도 접근할 수 있다.

 class Lsiron {
    static x = 10;
    y = 20;
 }


 let siron = new Lsiron();
 console.log(siron)  // Lsiron {y : 20} 출력
 console.log(siron.x) // 에러발생!! - 자식은 못 쓴다.
 console.log(Lsiron.x) // 10 출력 - 부모는 쓸 수 있다.

 

즉, 자식들이 가져다 쓸 수 없도록 부모만 가져다 쓸 수 있게 하는 것이다.

 

이 말은,  class 본연의 역할에 역행 하는 것 이다. 자식이 가져다 쓸 수 있도록 하는게 class의 역할인데 자식이 못 쓴다.

 

이렇게 쓸 수 있음으로써 장점은 바로 인스턴스(자식)를 생성하지 않아도 된다는 점이다. - new Lsiron() 필요없음.

 

자식이 사용할 수 없으니 당연하게도 자식을 생성하지 않아도 된다는 것이다.

class Lsiron {
    static x = 10;
    y = 20;
 }

 console.log(Lsiron.x) // 10 출력 - 부모는 쓸 수 있다.
 console.log(Lsiron.y) // 에러발생!!

 

static 또한 protected처럼 extends 를 적용한 클래스에서 사용할 수 있다.

class Lsiron {
    static x = 10;
 }
 
 class NewLsiron extends Lsiron {
    static iron() {
      Lsiron.x = 20;
    }
    
    // x 값을 출력하기 위한 메서드 추가
    static getX() {
      return Lsiron.x;
    }
 }
 
 // iron 메서드 호출
 NewLsiron.iron();
 console.log(NewLsiron.getX()); // 20 출력

 

static 만의 특이점은 public, private, protected + static 사용이 가능하다는 점이다.

class Lsiron {
    public static x = 10;
    y = 20;
 }


 let siron = new Lsiron();
 console.log(siron)  // Lsiron {y : 20} 출력
 console.log(Lsiron.x) // 10 출력 - 부모는 쓸 수 있다.

 

또한 static을 사용하면 굳이 constructor를 사용하지 않고도, 함수처럼 변수를 넣어줄 수 있다.

 

class Lsiron {
    static x = 'lsiron';
    y = Lsiron.x + '입니다.';
 }


 let siron = new Lsiron();
 console.log(siron)  // Lsiron {y : 'lsiron 입니다'} 출력 - x 출력 안됨.

 

원래 class내부에서 x 속성을 가져다 쓸 때, this.x 라고 해 주어야 하나, static 은 부모만 가져다 쓸 수 있기 때문에 Lsiron.x 로 속성을 넣어주어야 한다.

 

만약 외부에서 static 키워드를 넣은 속성의 값을 변경해 주고 싶을 땐 어떻게 해 주어야 할까?

( class 내부에서 값을 바꾸면 가져다썼던 모든 x의 값이 내부에서 변경 해 준 값으로 바뀜 )

class Lsiron {
    static x = 'lsiron';
    y = Lsiron.x + '입니다.';
 }


 let siron = new Lsiron();
 console.log(siron)  // Lsiron {y : 'lsiron 입니다'} 출력

 Lsiron.x = 'iron';

 let iron = new Lsiron();
 console.log(iron)  // Lsiron {y : 'iron 입니다'} 출력

 

 사실 속성을 숨기고 싶으면 protected, private이 더 낫다. 외부에서 변경하는 것은 위험성을 초래할 수 있다.

 

static 사용 시기

  • 클래스 단위로 공유되는 멤버: 인스턴스마다 다른 값을 가질 필요가 없는, 클래스 단위로 공유되는 멤버를 정의할 때 사용한다.
  • 유틸리티 메서드: 특정 객체에 의존하지 않고 수행할 수 있는 기능을 제공하는 메서드를 정의할 때 사용한다.
  • 실생활 예시: 날짜 관련 유틸리티 메서드를 포함한 클래스를 정의하여, 인스턴스를 생성하지 않고도 날짜 관련 기능을 사용할 수 있다.

 

 

 

참조 : 코딩애플