[JavaScript] 상속 (extends, super())

리액트를 공부하다 extends까지 온 이유는 리액트에 수도없이 나오는데 이해를 못하는 부분이 답답해서 공부를 했다.

extends를 공부하기 전에 class의 개념을 알아야 한다.

이곳을 참고하세요.

---

extends

extends는 클래스의 자식 클래스를 생성할때 사용한다.

class World {
    constructor(nation){
        this.nation = nation;
    }

    whereRUFrom(){
        console.log(`I'm from ${this.nation}.`);
    }
}

class Asia extends World {
    constructor(nation){
        super(nation);
    }
    whereRUFrom(){
        console.log(`I live in ${this.nation}.`)
    }
}

let imfrom = new Asia('SouthKorea');
imfrom.whereRUFrom();
//"I live in SouthKorea."

super()은 부모 생성자를 호출한다.

부모 생성자의 일이 끝난 후 부모가 해결하지 못하는 것은 자식 생성자가 하도록 하는 것이다.

이 super()이 없다면 중복이 될 것을 부모에게 가서 실행시키고 오는것이다.

 

World라는 클래스를 사용 하면서 거기서 더 부가적인 기능을 추가해서 이용하고 싶을 때 extends, 상속을 이용한다.

물론 World 클래스에서 다른 메소드를 넣을 수 있으나, 만일 저 코드가 내 코드가 아니거나 수정하면 참 곤란해지는 것 이라면, 신경쓸게 많아질 것이다.

 

때문에 어차피 겹치게 될 World의 생성자를 상속받고 나머지는 자식인 Asia의 whereRUFrom만 호출하여 결국 자식의 콘솔로그만 출력이 되는 것이다.

---

참고:

mozilla https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes#:~:text=Class%EB%8A%94%20%EA%B0%9D%EC%B2%B4%EB%A5%BC%20%EC%83%9D%EC%84%B1,%EA%B3%BC%20%EC%9D%98%EB%AF%B8%EB%A5%BC%20%EA%B0%80%EC%A7%91%EB%8B%88%EB%8B%A4.

 

생활코딩 https://www.youtube.com/watch?v=xKQhc8v9R2A&list=PLuHgQVnccGMAMctarDlPyv6upFUUnpSO3&index=17