공부방

클래스는 객체를 생성하기 위한 템플릿이다.

데이터와 데이터를 조작하는 코드를 하나로 묶어준다.

객체를 만들어주는 일종의 붕어빵 틀이라고 생각하면 이해하기 쉽다.

붕어빵 틀에 각종 재료를 넣고 구워내면 내용은 다르지만 같은 모양을 가진 붕어빵이 나오듯이

클래스에 맞춰서 코드를 써주면 표준화된 형태의 결과를 만들 수 있다.

클래스와 객체

클래스) 객체를 만들기 위한 도구 템플릿

class Car { //car라는 객체를 만들어내기위한 틀
	constructor(color,speed){
    		this.color = color;
    		this.wheels = 4;
    		this.speed = speed;
    	}
    	drive(){ // 메서드
            console.log(`차가 ${this.speed}로 달립니다`)
            // 클래스에서 자기자신의 속성에접근할때는 this를 이용해서 접근한다
           }
}

클래스 없이 객체를 만든다면

const car1 = {
    color : "green",
    wheels : 4
}
const car2 = {
    color:"red",
    wheels:4
}

클래스가 있다면

const car3 = new Car("blue",60);
car3.drive() //클래스의 메서드호출

클래스가 있다면 같은 방법으로 여러 개의 객체를 쉽게 만들 수 있다.

클래스 Static 키워드

class Article{
    constructor(articleNumber){
        this.articleNumber = articleNumber
    }
    static publisher = "Green Coding";
    static printPublisher(){
        console.log(this.articleNumber)
    }
}

하나는 아까 위에서 만들었던 Car class이고 아래는 이번에 만든 Article class이다 

Car class의 메서드는 [[Prototype]] 안에 있지만 

Article class의 static 키워드를 사용한 메서드는  constructor 안에 들어있는 걸 볼 수 있다.

그래서 일반 클래스와 메서드를 사용하는 방법이 다르다.

일반메서드에서는 오브젝트. 메서드로 접근한다  car.drive( ) 

스태틱을 사용한 변수나, 메서드는 클래스이름을 사용해서 접근해야 한다  클래스. 메서드

console.log(Article.publisher)
Article.printPublisher() 
//sttic은 클래스이름으로 접근한다. //일반메서드는 오브젝트.메서드로 접근

오버라이딩

상속관계에 있는 부모 클래스에서 이미 정의된 메서드를 자식 클래스에서 메서드로 다시 재정의 하는 것.

부모가 될 클래스 Shape

class Shape{
    constructor(width,height,color){
        this.width = width;
        this.height = height;
        this.color = color;
    }
    draw(){
        console.log(`${this.color}로 그립니다.`);
    }
    gerArea(){
        return this.width * this.height;
    }
}

Shape를 상속받는 클래스

class Rectangle extends Shape{
    //생성자 오버라이딩
    constructor(width,height,color,name){
        // 부모 생성자  
        super(width,height,color) //super 를 써서 부모요소를 받아옴
        // this.width = width;
        // this.height = height;
        // this.color = color;
        this.name = name
    }
    // 오버라이딩
    draw(){
        super.draw(); // console.log(`${this.color}로 그립니다.`);
        console.log('사각형을 그립니다.')
    }
}

const Ractangle = new Rectangle(20,20,'yellow'); //Rectangle 클래스로 Ractangle객체를 생성 
console.log(Ractangle); //Ractangle 출력
Ractangle.draw(); //Ractangle draw메서드 사용

객체가 어떤 클래스를 이용해서 만들어졌는지 확인

//instanceof / a instanceof b  / a객체가 b클래스를 이용해서만들엇는지
console.log(Ractangle instanceof Rectangle) //true
console.log(Ractangle instanceof Shape) //true
console.log(Ractangle instanceof Car) //false

Ractangle 객체는 Shape클래스를 상속받은 Rectangle클래스를 이용해서 만들어졌기 때문에 Shape클래스와 Rectangle클래스를 둘 다 이용해서 만들었다고 할 수 있다 그래서 true가 결괏값으로 나오게 된다.

클래스는 리액트에서 클래스형 컴포넌트를 사용할 때 사용하기 때문에 construdctor 나 this키워드 의 사용법을 잘 모른다면 리액트에서도 이해하기 힘들다.  메서드나 오버라이딩 같은 것들도.. 앞으로도 리액트 수업을 하다가 막히면 종종 자바스크립트 복습을 할 텐데 그때마다 놓치지 말고 꼼꼼하게 정리해 놔야겠다.