[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션

get set

게터와 세터

일단 게터와 세터가 뭔지 알 수 없지만 실습을 통해 알아보도록한다.

class A{
    _name = 'no name';
    get name(){
        return this._name + '@@@';
    }
    set name(value){
        this._name = value + '!!!'
    }
}
const a = new A();
console.log(a);
a.name = 'jiwon';
console.log(a);
console.log(a.name);
console.log(a._name);

//read only

class B{
    _name = 'no name';

    get name(){
        return this._name + '@@@';
    }
}
const b = new B();
console.log(b);
b.name = 'jiwon';
console.log(b);

클래스 A를 하나 생성하고 _name이라는 멤버변수를 생성하고 최초 값을 no name 으로 설정한다.

게터를 설정하고 get name() 이라는 함수를 설정하고

return 으로 this._name;을 해준다

세터는 name에 value를 인자로 주고

this._name = value + '!!!';

value에 느낌표 세개를 합쳐서 리턴해준다.

이렇게 게터와 세터를 설정해주고 어떻게 쓰는지 확인해보자

const a 에 A라는 객체를 만들어주고

이 객체의 로그를 확인해본다

실행해보면

{ _name : 'no name'} 이 출력된다

이 상태에 a. name에 'jiwon'이라는 문자열이 set을 하면 set함수가 불려와서 jiwon이 value자리에 들어가고 this.name에는 jiwon + !!! 가 출력되게 된다.

이번에는 게터를 살펴보자

a.name을 호출하면 get함수가 불리며 this._name이 출력되며

a.name 이 jiwon + @@@ 의 형태가 나오게된다.

이제 a._name을 출력해보면 세터한 결과가 @@@를 제외하고 jiwon만 출력되게 된다.

이런 일이 생기는것은 _name 처럼 _를 달고 정의하면 보통 내부에서만 사용하는 경우에 쓰기 때문에 게터 세터는 외부에서의 접근을 제어하기 때문에 직접적으로 a.name을 바꾸는 행위를 하지않고 게터와 세터를 통해 멤버변수를 바꾸는 식으로 로직을 형성하게 된다.

이번에는 class B에 세터를 설정하지 않고 게터만 두게되면

new B로 객체를 생성하고 console.log로 b를 출력해보고

b.name = 'jiwon';에 세터를 하고 싶지만 세터가 없기때문에 세터가 동작하지 않게된다.

이렇게 해서

console.log(b)를 둬도 세터함수가 없기 때문에 jiwon이라는 문자열이 셋팅되지 않고 read only로 사용 할 수 있는것이다.

static 변수, 함수

객체가 아니고, 클래스 변수와 함수

이번에는 클래스 내부에 static이라는 키워드를 사용하여 static변수와 static 함수를 생성해본다

new 를 통해 객체를 생성하는것이아니라 직접적으로 클래스를 통해서 변수와 함수를 설정하는 방식이다.

class A{
    static age = 25; //이것은 스태틱변수라고 한다.
    static hello(){
        console.log(A.age);
    }
}

console.log(A, A.age);
A.hello();

static 변수를 설정하면 직접적으로 static age에 접근할 때는 A.age의 형태로 접근할 수 있는데 new A를 통해 생성한것이아니라 클래스의 변수 혹은 함수로 생성이된다.

class B{
    age = 25;
    static hello(){
        console.log(this.age);
    }
}

console.log(B, B.age);
B.hello();

new B().hello();

class C {
    static name = '이 클래스의 이름은 C가 아니다';
}
console.log(C);

이번에는 클래스 B를 생성하여

age를 멤버변수로 생성하고 hello함수는 static으로 생성한다.

이를 출력하기위해 this.age로 접근해보고

B가 뭔지 B.age에 접근해보고

B.hello()로 접근해보면 undefined가 this.age또한 undefined로 출력이 되게된다

new B().hello() 또한 스태틱함수이기때문에 new B로만드는 객체에 속해있는 함수가 아니기 때문에 에러가 발생한다.

다음에는 class C에 static name이라는 변수에 문자열을 담고.

출력해 보게 되면

A를 실행할 때와다르게 클래스의 이름이 출력되지않고 static name자리에 할당된 값이 출력 되게 된다.

클래스 이름이 C였기 때문에 C가 출력될것 같지만 static name이라는 변수가 클래스 C를 뜻한다는것을 알 수 있다.

extends

클래스 상속

상속을 위해서는 extends라는 키워드를 사용하게 된다.

class Parent{
    name = 'Lee';
    hello(){
        console.log('hello', this.name);
    }
}

class Child extends Parent{
    const p = new Parent();
    const c = new Child();
    console.log(p,c);

    c.hello();
    c.name = 'jiwon';
    c.hello();
}

class parent를 생성해주고 이를 상속받는 자식클래스를 하나 생성해준다

이렇게하면 Parent가 가지고 있는 멤버변수와 멤버함수를 자식클래스가 상속받게된다.

출력해보면 child는 아무것도 해주지 않아도 Parent를 상속받기때문에 name = 'Lee'를 확인할 수 있고 hello에 접근하여 자식이 c.name에 접근하면 Parent의 this.name에 jiwon의 값을 할당하여 바뀐 결과 또한 확인 할 수 있다.

override

클래스의 상속 멤버 변수 및 함수 오버라이딩 추가

class Parent{
    name = 'Lee';
    hello(){
        console.log('hello', this.name);
    }
}

class Child extends Parent{
    age = 25;
    hello(){
        console.log('hello', this.name, this.age);
    }
}

const p = new Parent();
const c = new Child();

console.log(p, c);
c.hello();
c.name = 'jiwon';
c.hello();

부모와 자식클래스 생성은 동일하고 부모가 가지고있지 않은 age라는 멤버변수와 부모가 가지고 있는 함수를 가져와 this.age를 추가한다

이렇게 실행해보면 부모는 name: 'Lee'만 출력되고 자식은 age가 추가되어 25와 함께 출력된다.

이전과 다르게 c.hello()에 접근하게되면 부모가 가진 함수가 그대로 실행되지 않고 자식이 구현한 hello함수가 실행되게된다.

super

자식이 constructor에서 무언가를 추가하고자할때 super를 호출해야하는것을 확인해보자

class Parent{
    name;

    constructor(name){

    this.name = name;
    hello(){
        console.log('hello', this.name);
    }
}
class Child extends Parent
    age;

    constructor(name, age){
        super(name);
        this.age = age;
    }
    hello(){
        console.log('hello', this.name, this.age);
}

const p = new Parent('jiwon');
const c = new Child('jiwon', 25);

console.log(p,c);
c.hello();

자식클래스는 마찬가지로 부모를 상속받고 age를 추가한다.

그리고 constructor에서 name 과 age를 둘다 받아 this.age = age 해준다.

부모에서 하는일을 하고 자식에서 하는일을 하기 위해

this.age이전에 super(name);을 실행시켜주면 부모의 constructor와 같은 의미를 띄고있기 때문에 부모의 constructor가 먼저 실행되게된다.

마찬가지도 hello 함수를 this.age를 추가하여 실행해주고 overriding 해준다.

자식 constructor에서 부모의 this.name의 작업을 받아오고

age는 자식의 age가 overriding 되기 때문에 예상했던 결과 가 출력되는것을 확인할 수 있다.

스태틱

class Parent{
    static age = 25;
}

class Child extends Parent{}

console.log(Parent.age, Child,age);

이를 실행해보면 스태틱변수도 정상적으로 상속되는것을 확인할 수 있고

그림을 보면

부모의 class를 자식 class가 상속받고 부모의 class가 new를 통해 인스턴스를 만들어주고 자식 class도 new를 통해서 인스턴스를 생성해주고 스태틱변수는 부모로부터 자식으로 내려오고 멤버변수와 멤버함수도 부모인스턴스와 자식인스턴스가 상속받을 수 있다.

 

 

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스