모던 리액트 Deep Dive - 클래스

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.3 클래스 

1.3.1 클래스란 무엇인가?

💡자바스크립트의 클래스란

• 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것

// 클래스 예제
// Car 클래스 선언
class Car {
  // constructor는 생성자. 최초에 생성할 때 어떤 인수를 받을지 결정할 수 있으며,
  // 객체를 초기화하는 용도로도 사용
  constructor(name) {
    this.name = name
  }

  // 메서드
  honk() {
    console.log(`${this.name}이 경적을 울립니다!`)
  }

  // 정적 메서드
  static hello() {
    console.log('저는 자동차입니다.')
  }

  // setter
  set age(value) {
    this.carAge = value
  }

  // getter
  get age() {
    return this.carAge
  }
}

// Car 클래스를 활용해 car 객체를 만듦
const myCar = new Car('자동차')

// 메서드 호출
myCar.honk()

// 정적 메서드는 클래스에서 직접 호출
Car.hello()

// 정적 메서드는 클래스로 만든 객체에서는 호출 불가능
// Uncaught TypeError: myCar.hello is not a function
myCar.hello()

// setter를 만들면 값 할당 가능
myCar.age = 32

// getter로 값 가져오기 가능
console.log(myCar.age, myCar.name) // 32 자동차

1. Constructor (생성자)

• 객체를 생성하는데 사용하는 메서드
• 단 하나만 존재할 수 있으며, 여러 개를 사용한다면 에러가 발생한다
• 생성자에서 수행할 작업이 없다면 생략하는 것도 가능하다.

2. Property (프로퍼티)

• 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값을 의미

class Car {
  constructor(name) {
    // 값을 받으면 내부에 프로퍼티로 할당됨
    this.name = name
  }
}

const myCar = new Car('자동차') // 프로퍼티 값을 넘겨줌

3. getter와 setter

• getter : 클래스에서 값을 가져올때 사용
• setter : 클래스에 값을 할당할때 사용

4. 인스턴스 메서드

• 클래스 내부에서 선언한 메서드
• 자바스크립트에서는 propotype에 선언되므로 프로토타입 메서드라고도 불림
• Object.getPrototypeOf를 사용하면, 인수로 넘겨준 변수의 prototype을 확인할 수 있음

class Car {
  constructor(name) {
    this.name = name
  }

  // 인스턴스 메서드 정의
  hello() {
    console.log(`안녕하세요, ${this.name}입니다.`)
  }
}

const myCar = new Car('자동차')

myCar.hello() // 안녕하세요, 자동차입니다.

Object.getPrototypeOf(myCar) // {constructor: f, hello: f}

5. 정적 메서드

• 클래스의 인스턴스가 아닌 이름으로 호출할 수 있는 메서드
• this에 접근할수 없지만, 인스턴스를 생성하지 않아도 사용할수 있음(재사용 가능)

class Car {
  static hello() {
    console.log('안녕하세요!')
  }
}

const myCar = new Car()

myCar.hello() // TypeError: myCar.hello is not a function
Car.hello() // 안녕하세요!

6. extends (상속)

• 기존 클래스를 상속받아서 자식 클래스에서 상속받은 클래스를 기반으로 확장하는 개념
• 기존 클래스를 기반으로 다양하게 파생클래스를 만들 수 있음

class Car {
  constructor(name) {
    this.name = name
  }

  honk() {
    console.log(`${this.name} 경적을 울립니다!`)
  }
}

class Truck extends Car {
  constructor(name) {
    // 부모 클래스의 constructor, 즉 Car의 constructor를 호출
    super(name)
  }

  load() {
    console.log('짐을 싣습니다')
  }
}

const myCar = new Car('자동차')
myCar.honk() // 자동차 경적을 울립니다!

const truck = new Truck('트럭')
truck.honk() // 트럭 경적을 울립니다!
truck.load() // 짐을 싣습니다!