📆 날짜

2023/12/13(수)

📚 챕터

클래스란 무엇인가

---

👨🏻‍💻 학습 내용

🎯 클래스란 무엇인가

클래스는 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념으로 볼 수 있다.
즉 , 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 바로 클래스다.
클래스를 활용하면 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리하게 할 수 있다.

예제 코드를 보면서 어떻게 클래스를 사용하는지 살펴보자

<script>
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 , 자동차
</script>

📌 constructor

constructor = 생성자
이름에서 알 수 있는 것처럼 객체를 생성하는 데 사용하는 툭수한 메서드다.
단 하나만 존재할 수 있으며, 여러 개를 사용한다면 에러가 발생한다.
그러나 생성자에서 별다르게 수행할 작업이 없다면 생략도 할 수 있다.

<script>
// X
class Car {
 constructor(name){
 this.name = name
 }
 
 constructor(name){
 	this.name = name
 } // SyntaxError : A class may only have one constructor
 
 // O
 class Car{
  	// constructor는 없어도 가능하다.
 }
 </script>

📌 프로퍼티(property)

프로퍼티란 클래스로 인스턴스를 생성할 때 내부에서 정의할 수 있는 속성값을 의미한다.

<script>
class Car {
 constructor(name){
 this.name = name
 }

const myCar = new Car('자동차')//프로퍼티 값을 넘겨주었다.
 </script>

인스턴스 생성 시 constructor 내부에는 빈 객체가 할당돼 있는데 바로 이 빈 객체에 프로퍼티의 키와 값을 넣어서 활용할 수 있게 도와준다.

📌 getter 와 setter

getter : 클래스에서 무언가 값을 가져올 때 사용된다.
getter을 사용하려면 앞에 get이라는 키워드를 붙여야하고,뒤이어서 getter의 이름을 선언해야한다.

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

setter : 클래스 필드에 값을 할당할 때 사용한다.
사용방법은 get과 동일하다.

📌 인스턴스 메서드

클래스 내부에서 선언한 메서드를 인스턴스 메서드라고 한다.
자바스크립트의 prototype에 선언되므로 프로토타입 메서드라고 불리기도 한다.
객체지향언어에서 흔히 사용되는 클래스(Class)가 자바스크립트에서는 프로토타입(prototype)이며 생성자 함수가 사용된다. 다시 말해 클래스나 프로토타입을 사용하여 만들어 낸 것이 결과물이 인스턴스라고 할 수 있다.
이렇게 생성된 인스턴스는 원래의 객체인 클래스나 프로토타입이 가지고 있는 프로퍼티(property)와 메소드(method)를 모두 상속(inheritance)받는다.

📌 정적 메서드

정적메서드는 특이하게 클래스의 인스턴스가 아닌 이름으로 호출할 수 있는 메서드다.

<script>
class Car {
	static hello(){
    console.log('반갑습니다~')
    }
}

const myCar = new Car()

myCar.hello()// TypeError: myCar.hello is not a function
Car.hello()//반갑습니다~
</script>

정적 메서드 내부의 this는 클래스로 생성된 인스턴스가 아니다.
클래스 자신을 가리키기 때문에 다른 메서드에서
일반적으로 사용하는 this를 사용할 수 없다.
하지만 인스턴스를 생성하지 않아도 정적 메서드는 사용할 수 있고,
생성하지 않아도 접근 가능해서 객체를 생성 안해도 여러 곳에서
재사용이 가능하다는 장점이 있다.
이러한 장점을 이용하여 애플리케이션 전역에서 사용하는 유틸 함수를
정적 메서드로 많이 활용하는 편이다.

📌 상속

리액트에서 클래스형 컴포넌트를 만들기 위해서 extends React.Componet 또는
extends React.pureComponent를 선언한 것을 본 적이 있을것이다.
이 extends는 기존 클래스를 상속받아서 자식 클래스에서 이 상속받은
클래스를 기반으로 확장하는 개념이라 볼 수 있다.
이 extends를 활용한다면 기본 클래스를 기반으로 다양하게 사물이 어떤 주체로부터 갈려 나와 생기는 클래스를 만들 수 있다.

➡️ 다음 글 에서는 클래스와 함수의 관계에 대해 살펴보자.