[타입스크립트] protected, static 키워드 사용하기

extends 문법 복습해보기 : 

class의 내용을 복사하고 싶을때, 어떤 코드를 사용하면 되는가? 

extends 키워드를 사용하면 된다. 

class User{
x = 10;
}

class NewUser extends User{
}

let 사람 = new NewUser();
console.log(사람);

위와 같이 코드를 작성하면 User로 부터 복사되어서 생성된 사람이라는 instance에서도 x속성이 들어가 있는 것을 확인할 수 있다. 

개발자들은 이런식으로 코드의 양을 줄일 수 있 수 있었다. 

---

protected 란? : 

그런데 만약 여기서 private키워드를 사용하면 어떻게 될까?

private는 해당 중괄호{}안에서만 이용이 가능하다. 

그렇기 때문에 복사된 클래스 안에서는 private으로 지정된 변수를 사용하는 것이 불가능하다. 

이런 한계로부터 나온것이 protected라는 키워드이다. 

 

이 protected 는 조금 더 확장성을 제공해준다. 

class User{
protected x = 10;
}

class NewUser extends User{
doThis(){
this.x = 20;
}
}

protected는 확장된(복사된) 클래스 안에서도 사용가능하게 만들어준다.

private보다는 조금 더 확장된 버전이라고 생각하면 된다. 

 

결론은 class를 여러개를 만들고 싶은데, 클래스끼리만 공유하는 속성을 만들고 싶다면 

protected키워드를 넣어서 사용하면 된다. 

만약 class를 여러개 사용하지 않는다면, 굳이 사용할 필요가 없다. 

---

static 키워드란? : 

다음은 static키워드이다. 

class 부모 {
static 안좋은습관 = '티비많이보기';
좋은습관 = '절제하기';
}

let 자식 = new 부모();
console.log(자식) // {좋은습관 : '절제하기'}

x라는 변수에 static키워드를 적용해주었다. 그리고 이 클래스로부터 만들어진 자식 instance를 콘솔에 출력해보니, {y:20}라는 값만 나온다. static키워드가 적용된 x 키워드는 나오지 않는다. 

static 키워드는 부모에서만 사용가능한 변수를 만드는 것이다. 자식에게 물려주고 싶지 않은 변수에는 static을 적용하면 된다. 

위의 코드에서 부모는 자식에게 안좋은습관을 물려주지 않기 위해서 static 키워드를 적용했다. 

 

그렇기 때문에 만약,

자식.안좋은습관

이렇게 콘솔에 출력해보면 복사된 내용이 없기 때문에 에러가 나온다. 

 

그렇다면 이 '안좋은습관'은 대체 어떻게 사용할 수 있는가?  

부모.안좋은습관 이렇게 하면 사용가능하다.

부모 클래스에 직접 접근한다면 이용가능한 것이다. 

 

stactic은 여러 키워드와 동시에 이용가능하다.

class User {
private static x = 10;
y = 20;
}

 

그렇다면 우리는 이 static 키워드를 어디에 활용할 수 있을까? 

예시를 살펴보자. 

class User {
intro = '전문가입니다'
}

let 철수 = new User();
console.log(철수) // 전문가입니다

 

여기서 어떤 전문가입니다 하는 내용으로 변경하고 싶다면? 아래와같이 코드를 추가할 수 있다. 

class User {
static skill = 'js';
intro =  User.skill + '전문가입니다';
}

let 철수 = new User();
console.log(철수) // js 전문가입니다

그런데 여기서 만약 여기서 skill 부분을 자식에게 물려주지 않고 부모에서만 관리하고 싶다면? 

static skill = 'js'이렇게 붙여주면 된다.

static으로 붙은 변수들은 this 사용이 불가능하다 그렇기 때문에 User.skill 이렇게 사용해야 한다. 

 

class User {
static skill = 'js';
intro =  User.skill + '전문가입니다';
}

let 철수 = new User();
console.log(철수) // js 전문가입니다

User.skill = 'ts'

console.log(철수) // ts 전문가입니다

User.skill = 'ts'를 사용해서 바깥에서 바로 변경이 가능하다. 이렇게 할 경우 위에서 출력한 철수와 그 아래에서 출력한 철수의 출력결과가 달라진 것을 볼 수 있다. 

그러나 밖에서 안쪽의 변수를 변경하려면 언제나 위험성이 따른다.

그런게 싫다면 protected 혹은 private를 사용하는 것을 고려해보길 바란다.