웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

ECMA Script 2015, ES6에서 class를 사용하여 클래스 선언하기

Last Modified : 2022-01-19 / Created : 2017-07-31
2,504
View Count
ES 5 이후의 자바스크립트... 즉 ECMA Script 2015, ES 6부터는 자바스크립트에서도 클래스를 사용할 수 있게 되었습니다. ES 6에서 어떻게 클래스를 선언하고 사용하는지 자세히 알아봅니다.

@ 이전에는 어떻게 클래스, 객체지향을 구현하였나...
ES 6 이 후부터는 자바스크립트에서 클래스를 사용하여 선언할 수 있지만 이 전에는 프로토타입(prototype) 방식을 사용하는 방법으로 생성자 함수를 만들 수 있습니다. 하지만 클래스를 사용하면 더 쉽게 클래스를 만들고 확장하는게 간단하겠죠. 그렇다면 클래스는 무엇일까요?


! 자바스크립트에서 클래스(class)

객체지향언어에서 객체에 해당하는 것이 바로 클래스이며 가장 중요한 부분이라고 할 수 있습니다. 기존의 자바스크립트에서 클래스를 생성하려면 프로토타입 방식을 사용할 수 있습니다. 하지만 ES 6 이 후 자바스크립트에서도 class를 사용하여 클래스를 생성, 확장하고 인스턴스를 만들 수 있게 되었죠.  그렇다면 ES 6에서는 어떻게 클래스를 생성하는지 자세히 알아봅니다.





# ES 6 클래스의 생성, 선언하기, class

가장 기본으로 클래스를 선언하는 방법입니다. ES 6 에서는 class {} 예약어를 사용합니다. 간단하게 Site 이름의 클래스를 생성해봅니다.
class Site {
}

아래와 같이 표현식을 사용하여 생성할 수도 있습니다.
const Site = class Site {
}

이제 class를 사용하여 인스턴스를 생성하는 방법을 알아봅니다. 클래스는 내부에 constructor()를 사용할 수 있고 이를 사용해 인스턴스를 생성하거나 초기화 할 수 있게 됩니다.
class Site {
  constructor(siteName, siteUrl) {
    this.sitenName = siteName;
    this.siteUrl = siteUrl;
  }
}

위에서 Site 클래스는 생성자 constructor()를 가지며 내부에는 siteName, siteUrl이라는 프로퍼티를 두 개를 가지고 있습니다. 기존 생성자 함수를 사용하는 방법은 아래와 같습니다.

@ 생성자 함수를 사용한 방법
function Site(siteName, siteUrl) {
  this.sitenName = siteName;
  this.siteUrl = siteUrl;
}

간단하게 비교를 했을 때는 class를 사용하는 외에 큰 차이가 없어보입니다. 이제 인스턴스를 만들어 보겠습니다.


! 인스턴스의 생성

다음으로 webisfree라는 새로운 인스턴스를 생성해보록 하겠습니다. 스크립트는 아래와 같습니다.
webisfree = new Site('webisfree', 'https://webisfree.com');

새롭게 만든 webisfree의 프로퍼티를 확인해보겠습니다.
console.log(webisfree.siteName)
console.log(webisfree.siteUrl)


'webisfree'
'https://webisfree.com'

class를 사용한 방법 역시 잘 동작합니다. 넘겨준 인자의 값도 잘 동작하는 군요.


! class를 사용한 클래스 확장 방법

class는 기존의 클래스를 사용하여 쉽게 확장, 상속이 가능합니다. 먼저 아래 코드를 봐주세요.
class Site {
  constructor(siteName, siteUrl) {
    this.siteName = siteName;
    this.siteUrl = siteUrl;
  }

  getSitename() {
    return this.siteName;
  }
}

위 Site는 위에서 이미 만든 class를 사용한 클래스입니다. 이제 이를 확장하여 DevSite라는 새로운 클래스를 만들어 봅니다.
class DevSite extends Site {
  constructor(siteName) {
    super(siteName);
  }

  getSitename2() {
    return super.getSitename();
  }
}

여기서 super() 키워드를 볼 수 있습니다. super()는 상속받는 클래스의 constructor()에 접근할 수 있으며 이를 사용해 해당 클래스의 파라미터를 가져올 수 있습니다.

추가로 메소드 getSitename2() 내부에도 super가 사용되었습니다. 이처럼 메소드 내부에도 프로퍼티처럼 super를 사용할 수 있으며 확장 받는 클래스의 메소드 역시 가져올 수 있습니다.

이제 새로운 DevSite 클래스가 만들어졌습니다.
webisfree = new DevSite('webisfree.com')

webisfree.siteName;
// 출력 결과
'webisfree.com'

새로운 DevSite 클래스는 super()를 사용하여 기존의 프로퍼티 siteName을 그래도 사용하였습니다.


! class에 메소드 추가하기

클래스에도 메소드를 추가할 수 있습니다. 아래는 프로퍼티 값 siteName을 보여주는 메소드 getSiteName()을 만들어보겠습니다.
class Site {
  constructor(siteName, siteUrl) {
    this.siteName = siteName;
    this.siteUrl = siteUrl;

    // getSiteName 메소드 추가
    this.getSiteName = function() {
      return this.siteName;
    }
  }
}

이제 getSitename() 메소드가 만들어졌습니다. 잘 동작하는지 아래에서 확인해보겠습니다.
console.log(webisfree.getSiteName())

'webisfree'

잘 동작하는 것을 확인하였습니다.


! 마치면서

이처럼 class를 사용하면 extends라는 키워드를 사용하여 새로운 클래스로 확장할 수 있습니다. 이 경우 부모 클래스에 접근하기 위해 super()를 사용한 부분이 특징입니다.

그리고 class 선언시 호이스팅(hoisting)되지 않습니다. 이는  function()과는 다른 부분인데 예를들어 아래에서 선언된 부분은 호이스팅 되지 않아 에러가 발생합니다.
// 에러가 발생하지 않음 (O)
(function() { class Site {}; test = new Site(); } )()

// 에러가 발생 (X)
(function() { test = new Site(); class Site {}; } )()

여기까지 ES 6의 클래스 사용 방법에 대하여 알아봤습니다.

es6 es2015 class선언 클래스선언
아래의 글도 찾고 계시지 않나요?

Previous

자바스크립트 CommonJS, 모듈을 사용한 웹개발

Previous

자바스크립트 줄바꿈 br 태그 또는 br 태그 줄바꿈으로 바꾸기