본문 바로가기
카테고리 없음

node.js/자바스크립트 - 21. 클래스(Class)

반응형

클래스(class)는 자바(Java), C++. C# 등 객체지향형 프로그래밍 언어에서 사용되는 방식입니다. 자바스크립트도 클래스 사용이 가능한데요. 정통 클래스에는 미치지 못하나 클래스를 표방한 개념을 사용하는 사례가 많습니다. ( node.js, react 프레임워크 등 )

클래스란 무엇일까요?개념은 간단합니다. 설계도입니다.
하지만 능숙히 사용하려면 어느정도 숙련된 기술을 필요로 합니다.
예를 들어 컴퓨터를 만들 수 있는 설계도가 있다고 칩시다. 이 설계도가 바로 클래스입니다.

그리고 설계도를 이용해 만들어낸 컴퓨터는 오브젝트가 됩니다.
컴퓨터의 설계도는 1개지만 그로 인해 컴퓨터 오브젝트는 무한으로 만들어낼 수 있습니다.

클래스는 2단계로 나뉘어 선언을 하는데요.

첫번째는 설계도에 해당하는 클래스를 선언하는 것이고,
두번째클래스로 오브젝트를 선언하는 것입니다.

 

클래스 표준 사용법은 보통 아래와 같은데요.

class 클래스이름
{
  constructor()
  {
    this.속성=;
  } 
  함수이름(파라미터, 파라미터, ...)
  {
    실행할 코드
  }
}
let 변수=new 클래스이름();


실제 사용 예를 들어보도록 하겠습니다. 먼저 동물(Animal)이라는 빈 클래스를 선언합니다.

class Animal
{
}


동물이라는 클래스는 설계도일 뿐 오브젝트가 아니기 때문에 아직 존재하지 않습니다.
이 설계도로 오브젝트를 만드는 방법은 아래와 같습니다.

let Fish = new Animal();


클래스 Animal 로 오브젝트 Fish 를 만드는 방법인데요.
비록 아무 내용도 없긴 하나 Fish는 오브젝트이기 때문에 오브젝트에 바로 속성을 추가할 수도 있고 함수도 추가할 수 있습니다. 하지만 이런 방법은 클래스 방식이 아닙니다.

Fish.abc = function(){
  console.log("abc");
};


클래스 방식으로 함수를 추가해보겠습니다.

class Animal
{
  setInfo(animalType, name, age)
  {
    this.animalType=animalType;
    this.name=name;
    this.age=age;
  }
 
  showInfo()
  {
    switch(this.animalType)
    {
      case 1:
        console.log("동물 유형 : 육축");
        break;
      case 2:
        console.log("동물 유형 : 물고기");
        break;
      case 3:
        console.log("동물 유형 : ");
        break;
      default:
        console.log("동물 유형 : 알수없음");
    }
    console.log("동물 이름 : " + this.name );
    console.log("동물 나이 : " + this.age );
  }
}


추가된 함수는 2가지인데요. 하나는 setInfo()이고, 하나는 showInfo() 입니다.

setInfo() 함수는 동물의 유형, 이름, 나이를 설정하는 함수이고,
showInfo() 함수는 동물의 정보를 보여주는 함수인데요.

클래스에서 함수를 선언했지만 아직 함수를 사용할 수는 없습니다.

Animal.setInfo(2, "고등어", 2); ( X )


함수는 오브젝트에서만 사용해야 합니다. 아래와 같이 말이지요.
Fish(물고기) 오브젝트를 선언, 정보를 설정하고 보여주는 부분입니다.

let Fish = new Animal();
Fish.setInfo(2, "고등어", 2);
Fish.showInfo();
출력결과
동물 유형 : 물고기
동물 이름 : 고등어
동물 나이 : 2


클래스의 유용한 점은 이제부터 시작입니다.
Animal 이란 클래스가 있기 때문에 아래 코드를 실행하면 또 하나의 오브젝트가 생겨나는데요.
이 번에는 Animal 클래스로 Cow(소) 오브젝트를 선언, 정보를 설정하고, 보여주었습니다.

let Cow = new Animal();
Cow.setInfo(1, " ", 10);
Cow.showInfo();
출력결과
동물 유형 : 육축
동물 이름 :
동물 나이 : 10


아마도 오브젝트 방식이었다면 Fish와 Cow 각각 함수를 제작해야 했을 것입니다.
여기서 더 나은 방법이 있습니다. 현재 setInfo() 함수는 오브젝트 생성 후 항상 호출하고 있는데요. 생성자(constructor) 함수를 사용하면 초기화 부분을 생략할 수 있습니다.
그래서 오브젝트 생성 후 초기화를 매우 간결하게 할 수 있습니다. 코드는 아래와 같습니다.

class Animal
{
  constructor(animalType, name, age)
  {
    this.animalType=animalType;
    this.name=name;
    this.age=age;
  }
      :
let Cow = new Animal(1, " ", 10);


constructor 함수는 클래스를 이용, 오브젝트를 선언할 때 자동 실행이 되는데요.
오브젝트 선언시 주어지는 파라미터가 순서대로 각각 입력됩니다.

그래서 오브젝트 선언할 때 코드를 간결하게 사용할 수 있습니다.

let Fish = new Animal(2, "고등어", 2);
Fish.showInfo();
출력결과
동물 유형 : 물고기
동물 이름 : 고등어
동물 나이 : 2
let Cow = new Animal(1, " ", 10);
Cow.showInfo();
출력결과
동물 유형 : 육축
동물 이름
동물 나이 : 10

필요하신 분에게 도움이 되시길 바랍니다. 그러면 이만 :)

도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~

반응형