class

WONNY_LOG·2023년 5월 20일

JS Class는 뭔가요?

개발을 하다 보면 동일한 속성과 자료를 가진 객체를 여러개 만들어야하는 상황이 생긴다.
그럴 때 효율적인 코드를 짜기위해 사용할 수 있는 문법이 바로 class이다.
(객체지향프로그래밍(OOP)를 정의하는 개념 중 하나이다.)

class

클래스는 객체지향 프로그래밍에서 특정 객체를 생성하기 위한 템플릿(틀)이다.
객체는 변수와 메서드로 구성된다.

class문법을 이용해 새로운 객체를 생성할 수 있는 생성자를 만든다.
=> 부모
new 키워드를 이용해 생성자가 가지고있는 속성과 자료를 그대로 상속 받아 사용할 수 있다.
=> 자식 (무한대로 만들어 사용가능)

prototype

자바스크립트에서 상속 기능은 prototype이라는 것을 이용한다.
function (class)키워드를 사용하는 순간 prototype이 생성자 함수에 추가 된다.
prototype은 부모가 -> 자식에게 속성과 자료를 상속할때 이 전부를 모두 담고있는 일종의 유전자 라고 볼 수 있다.

constructor 생성자

생성자는 class가 생성될때 가장먼저 실행되는 메서드다.
class 내에 선언해서 사용하지만, 자바스크립트의 class는 생성자를 선언하지 않으면 자동으로 빈 생성자가 호출된다.
모든 class가 new를 통해서 인스턴스를 생성하는 시점에 무조건 생성자가 호출된다.
(new를 통해 만들어진 클래스는 인스턴스라 부른다)

사용방법

//ES6 자바스크립트에 포함된 최신 클래스 문법을 사용해 만든 class
//생성자 함수 (부모)
class MyClass {
  // 프로퍼티의 기본값을 클래스 내부에 선언해 둘 수 있음
  subject = 'math';

  constructor(newSubject) {
    this.subject = subject;
  }
  
  // 여러 메서드를 정의할 수 있음
  sayHi() {
    alert(this.subject);
  }
  method1() { ... }
  ...
}

위와같이 class를 만들고

// 부모로부터 속성을 받을 자식 함수
const newObject = new MyClass('English')

new 키워드를 통해 class를 호출하면 MyClass라는 객체가 생성된다.
(class내부에서 정의한 메서드가 전부들어있는 객체가 생성됨)

클래스의 기본 초기값을 설정해주는 constructor() 생성자 메서드는 new연산자 사용시 자동으로 호출된다.
(별다른 조치 없이 객체 초기화 가능)

// 자식함수를 사용해보자:
console.log(newObject.subject)   //English
console.log(newObject.sayHi());  //English

new MyClass("John")를 호출하면 ?

새로운 객체가 생성된다.
넘겨받은 인자와 함께 constructor가 자동으로 실행된다.
이때 인자 "English"이 this.subject 할당된다.
이런 과정을 거친 후에 user.sayHi() 같은 객체 메서드를 호출할 수 있다.

extends 클래스 확장해서 사용하기

클래스에서 다른 클래스를 상속받아 사용할 수있다.

class pastClass {
  constructor(myName) {
    this.myName = myName;
    this.pastClass = 'pastClass';
  }

  getInfo() {
    return this.pastClass + ' ' + this.myName + ' ' + 'made by Lee';
  }
}

class extendsClass extends pastClass {
  // 부모 생성자에게 전해줄 myName
  constructor(myName) {
    // super를 이용해서 부모 생성자 호출, 생성자에게 필요한 myName도 넘겨줍니다.
    // super는 부모 생성자를 호출할 수 있는 메소드 입니다.
    // 자식 클래스에서 super를 호출하지 않을 경우 오류가 발생합니다.
    // 하지만, 자식 클래스에서 생성자 자체를 선언하지 않았다면 오류는 발생하지 않습니다.
    super(myName);
  }

  // 부모 클래스의 메소드를 재 선언 하게 되면 자동으로 덮어씌워집니다.
  getInfo() {
    console.log(this.pastClass);
    return 'This is extends Class !';
  }
}

const testValue = new extendsClass();
console.log(testValue.getInfo()); // 'This is extends Class !'

두 개의 클래스가 정의됨
testValue라는 곳에 extendsClass인스턴스가 생성
testValue의 getInfo메소드의 리턴값을 출력함

super

자식 클래서에서 부모클래서의 속성을 사용할 시, 반드시 부모생성자를 호출시켜야한다.
그 역할을 super 키워드가 한다.
super 생성자를 통해 부모 클래서의 속성을 자식클래스에서 변경해서 사용할 수 있다.
(덮어씌워서 사용 가능 한 것)

주의

자바스크립트의 class 문법에서는 런타임이 허용되어 프로퍼티의 기본값 선언이 가능하지만,
node.js에서는 불가능하다 !
리액트에서는 자동으로 babel을 이용해 최신 문법을 사용할 수 있도록 처리해줌!

getter(획득자) & setter(설정자) 접근자 프로퍼티

객체의 무결성을 보장하기 위해 사용한다.
예를 들어, 만약 외부에서 몸무게라는 필드에 직접 접근한다면 0보다 낮은 값을 줄 수도 있다. 이 경우 객체의 무결성이 깨지기 때문에 이를 방지하기 위해 Getter/Setter를 사용하여 데이터의 무결성을 지켜준다.
Getter, Setter를 이용해서 데이터를 생성 및 접근을 하게 되면 들어오는 값을 바로 저장하는 게 아닌, 한번 검증하고 처리할 수 있도록 할 수 있기 때문에 데이터의 무결성이 지켜진다.

무결성이란?
데이터의 정확성과 일관성을 유지하고 보증하는 것.

class 원하는클래스명 {
	constructor(파라미터1, 파라미터2){
    	this.속성명1 = 파라미터1;
        this.속성명2 = 파라미터2;
    }
    
    //사용자가 속성의 값을 꺼낼때 실행
    get 속성명1 {
    	return this.속성명1 * 2;
    }
    
    //사용자가 속성에 값을 저장할때 실행
    set 속성명1 (value){
    	if(value > 0)
    	    this._속성명1 = value;
    }
}

class Person {
	constructor(name, age, gender){
    	this.name = name;
        this.age = age;
        this.gender = gender;
    }
    
    //getter
    get age(){
    	return this._age;
    }
    
    //setter : class내 속성 값의 제한을 두어야 하는 경우 자주 사용
    set age(value){
    	if(value > 0 && value < 150){
    		this._age = value;
        }
    }
    
    //method 
	speak(){
    	console.log('이름 : ' + this.name + '  나이 : ' + this._age);
    }
}

let per1 = new Person('철수',20,'남');
let per2 = new Person('영희',30,'여');

per1.speak();
per2.speak();

setter

setter를 사용한 순간부터 프로퍼티에 값을 할당하려고할때, 프로퍼티에 직접할당하지 않고 setter를 호출한다.
const per1 = new Person('철수',20,'남');
per1객체를 생성해 age에 '20'을 할당하려고할때 set age(value)을 호출한다.
그리고 value가 0보다 큰지 && 150보다 작은지 검사하고 이후 age에 value를 할당한다.

% 무분별한 setter는 데이터 무결성을 해칠수도 있다

getter

getter를 추가한 순간부터 값을 사용하려고 시도하면 메모리에 저장된 값을 불러오지 않고 getter를 호출한다.
per1.speak()로 this.age를 사용하려 시도할 때 get age()를 호출한다.
그리고 setter로 할당된 값인 this.age를 리턴한다.