[JS] Class. 클래스와 인스턴스

정말 쉽게 설명하겠습니다.

 

1. 클래스와 인스턴스

클래스 = 설계도(원본)

인스턴스 = 위 설계도로 만들어낸 제품

 

우선 이렇게 두가지 개념을 외우고 갑니다. :)

 

 

2. 클래스를 어떤 때에 사용할까?

클래스는 왜 만들까요? 클래스는 같은 객체를 계~~속 만들어야 할때, 반복되는 노가다를 피하기 위해서 사용합니다.

 

예를 들어 게임에서 몹이 100마리 나오는 필드가 있다면, 몹 100마리를 일일히 코딩하려면 너무 에너지 소모가 크겠죠...?

설계도 한장을 보고 그 설계도 대로 몹을 계속 만들어내도록 하는 겁니다.

 

 

3. 클래스 선언하기

아래는 히어로를 만들어내는 설계도=클래스를 선언하는 방법입니다.

class Hero {
	설계내용
}

위와 같이 작성하면 Hero라는 클래스를 만드는 겁니다.

 

설계내용을 채워볼까요?

이 설계도는 일정한 양식이 있습니다.

 

단 2가지만 기억하면 돼요.

 

상태 / 동작

 

이렇게 두 분류의 내용을 채워주면 됩니다.

 

 

 

 

4. 클래스의 상태와 동작

우리가 만들 히어로는 체력, 힘, 민첩 등의 상태 정보를 가지고 있을테고, 또 그 히어로가 쓸 스킬 등의 동작 정보가 있을 겁니다.

 

상태 : 체력, 힘, 민첩

동작 : 히어로의 스킬이나 움직임

 

 

상태는 변수로 구현하고

동작은 함수로 구현합니다.

 

상태 : 체력, 힘, 민첩 (변수)

동작 : 히어로의 스킬이나 움직임 (함수)

 

class Hero {
	// 히어로의 상태
	hp = 100;
	power = 20;
	dex = 5;
}

 

 

 

이제 설계도 한장이 대충 만들어졌습니다.

이 설계도를 가지고 인스턴스(제품) 하나를 만들어볼게요.

 

let ironMan = new Hero()

new 클래스명() 을 해주면 새로운 인스턴스(제품) 하나가 생성됩니다. 그걸 아이언맨이라는 변수에 담아주었어요.

 

Hero라는 설계도를 보고 'ironMan'이라는 인스턴스를 하나 생성한 겁니다.

 

그런데 여기에는 치명적인 문제가 있습니다.

바로 설계도상에서 처음부터 hp, power, dex값이 고정되어 있어서 모든 인스턴스가 똑같은 값을 가지고 생산된다는 점입니다.

 

 

즉 이 클래스로는 전부 hp=100, power=20, dex=5 인 똑같은 복제품밖에 만들 수 없습니다.

let ironMan = new Hero()
let torr = new Hero()
let hulk = new Hero()
let wanda = new Hero()

console.log(ironMan)
console.log(torr)
console.log(hulk)
console.log(wanda)


// 결과
Hero {
  hp: 100,
  dex: 20,
  poewr: 5,
  __proto__: { constructor: ƒ Hero() }
}
Hero {
  hp: 100,
  dex: 20,
  poewr: 5,
  __proto__: { constructor: ƒ Hero() }
}
Hero {
  hp: 100,
  dex: 20,
  poewr: 5,
  __proto__: { constructor: ƒ Hero() }
}
Hero {
  hp: 100,
  dex: 20,
  poewr: 5,
  __proto__: { constructor: ƒ Hero() }
}

 

 

5. 내 마음대로 주문제작하기

이대로라면 아이언맨도 토르도 헐크도 완다도 모두 똑같은 스탯을 가집니다. 이래서는 안되겠죠. ^^;

 

설계도를 수정합시다. 외부에서 값을 넣어주면 그 값으로 스탯을 설정하도록 만들겠습니다.

그럴려면 클래스들만이 가지는, constructor(생성자)라고 하는 조금 특별한 애가 필요합니다.

얘는 말 그대로 밖에서 값을 받아와서 우리가 원하는 대로 주문제작을 해줍니다.

 

constructor에게 a,b,c 세개의 값을 받아오도록 하겠습니다.

class Hero{
    constructor(a, b, c){
    }
}

 

 

이 생성자라는 친구는 이런 식으로 받아온 값을 착착 넣어서 인스턴스를 주문제작해줍니다.

class Hero{
    constructor(a, b, c){
        this.hp = a;
        this.power = b;
        this.dex = c;
    }
}

여기서 못보던 게 등장하네요. this 입니다.

this는 바로 '자기자신'을 뜻합니다. 이 클래스로 만들어질 인스턴스 자기자신입니다.

즉 지금 만들어내는 '이' 인스턴스의 hp는 a로 해라. 이런 뜻입니다.

 

이제 수정된 설계도대로 인스턴스를 다시 만들어볼까요.

class Hero{
    constructor(a, b, c){
        this.hp = a;
        this.power = b;
        this.dex = c;
    }
}

let ironMan = new Hero(100, 200, 300)
let torr = new Hero(1000, 500, 50)

console.log(ironMan)
console.log(torr)


// 결과
// 아이언맨
Hero {
  hp: 100,
  power: 200,
  dex: 300,
  __proto__: { constructor: ƒ Hero() }
}

// 토르
Hero {
  hp: 1000,
  power: 500,
  dex: 50,
  __proto__: { constructor: ƒ Hero() }
}

네 드디어 우리가 원하는대로 스탯을 조정해서 제품을 만들어낼 수 있는 설계도가 되었네요!

 

 

자 우리는 지금 상태만 설정해주었습니다. 피통 얼마, 파워 얼마, 민첩 얼마 이런식으로요.

 

이제 이 히어로들에게 동작도 넣어주겠습니다.

 

 

 

 

 

 

6. 메서드 만들기

class Hero{
    constructor(a, b, c) {
        this.hp = a;
        this.power = b;
        this.dex = c;
    }
    
    // 동작만들기
    skill(str) {
    	console.log(str + '를 시전합니다.')
    }
}

let ironMan = new Hero(100, 200, 300)

이렇게 클래스 내부에 함수를 하나 만들어줍니다. function이라는 키워드는 필요없어요. 그냥 함수명(매개변수) { 실행내용 }

이렇게 적어줍니다.

 

그리고 실행할 때는 점을 찍고 함수명을 써주면 돼요. 바로 '메서드'를 만든 겁니다.

실행은 이런식으로 합니다.

ironMan.skill("날아오르기")

// 결과
'날아오르기를 시전합니다.'

 

 

// 클래스 생성
class Hero{
    constructor(a, b, c) {
        this.hp = a;
        this.power = b;
        this.dex = c;
    }
    
    // 동작만들기
    skill(str) {
    	console.log(str + '를 시전합니다.')
    }
  
    attack(str) {
        console.log(str + '공격을 가하였습니다.')
    }
  
    drink(str) {
        console.log(str + '을(를) 마셨습니다.')
    }
}

// 인스턴스 생성
let ironMan = new Hero(100, 200, 300)





// 동작(메서드) 실행
ironMan.skill("날아오르기")
ironMan.drink("초록물약")
ironMan.attack("로켓주먹")

// 동작(메서드) 실행결과
'날아오르기를 시전합니다.'
'초록물약을(를) 마셨습니다.'
'로켓주먹공격을 가하였습니다.'




// 상태 확인
console.log(ironMan.hp)
console.log(ironMan.power)
console.log(ironMan.dex)

// 상태 확인 결과
100
200
300

 

이렇게 정말 간단하게 클래스가 무엇인지, 인스턴스가 무엇인지, 동작과 상태를 어떻게 추가하고 사용하는지 알아보았습니다!

공부에 도움되셨길 바랍니다. ^^*