[RN] 타입스크립트 개념 정리 (4) - 클래스(Class) 란?

 

 

1. 클래스(Class) 란?

• 객체의 구조와 동작을 정의하는 청사진(템플릿) 역할을 한다.
• 클래스는 자바스크립트와 마찬가지로 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법이다.
• TypeScript의 클래스는 자바스크립트의 클래스 문법을 기반으로 하며, 추가적인 타입 검사와 더 강력한 기능을 제공한다! 
• 클래스는 필드(속성), 생성자(constructor), 메서드(함수) 등을 가질 수 있으며, 이를 통해 객체의 상태와 행동을 정의한다.

 

 

📌 주의할점!

• 타입스크립트의 클래스는 필드를 선언할 때 타입 주석으로 타입을 함께 정의해주어야한다.
• 그렇지 않으면 함수 매개변수와 동일하게 암시적 any 타입으로 추론이 되는데 만약..엄격한 타입검사모드 일 때에는 오류가 발생할 수 있다.
• 또한 추가로 생성자에서 각 필드의 값을 초기화하지 않을 경우 초기값도 함께 명시해주어야한다.

 

class Employee {
  // 필드
  // 타입 지정해주어야한다 ~ 
  name: string = "";
  age: number = 0;
  position: string = "";
  }
}

 

---

2. 클래스 정의하기

 

class Person {
  // 필드 (속성)
  name: string;
  age: number;

  // 생성자
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 메서드
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

 

const person = new Person("hihilong", 25);
person.greet(); 

// "Hello, my name is hihilong and I am 25 years old."

 

1️⃣ 필드

• 클래스의 속성을 나타낸다.
• 이 속성들은 객체가 가지는 데이터를 나타낸다.
• 위의 코드에서는 Person 객체가 가지는 데이터들을 나타내는 name, age 가 Person 클래스의 속성(필드)이다.

2️⃣ 생성자

• constructor(생성자) 는 객체가 생성될 때 호출되는 특별한 메서드이다.
• 여기서는 name 과 age 를 받아와서 클래스의 속성으로 초기화한다.
• 만약 생성자 에서 초기화가 이루어진다면 필드에서 생략이 되어도 된다 ~

3️⃣ 메서드

• 클래스 내에서 정의된 함수
• 객체가 수행할 수 있는 동작을 정의

 

• 필드: name과 age는 Person 클래스의 속성(필드)입니다. 이 속성들은 Person 객체가 가지는 데이터를 나타냅니다.
• 생성자: constructor는 객체가 생성될 때 호출되는 특별한 메서드입니다. 여기서 name과 age를 받아와서 클래스의 속성으로 초기화합니다.
• 메서드: greet는 클래스 내에서 정의된 함수(메서드)로, 객체가 수행할 수 있는 동작을 정의합니다

 

 

 

class Employee {
  // 필드에서 타입 명시
  // 타입 명시해주고 초기값도 지정해주는 것 
  
  name: string = "";
  age: number = 0;
  position: string = "";


  }
}

// 필드에서 타입 명시 + 생성자에서 초기값 지정하는 것 

class Employee {
  // 필드
  name: string; 
  age: number;
  position: string;

  // 생성자
  constructor(name: string, age: number, position: string) {
    this.name = name;
    this.age = age;
    this.position = position;
  }

  // 메서드
  work() {
    console.log("하이롱");
  }
}

 

 

---

 

3. 접근제어자(Access Modifiers)

• 접근 제어자를 사용하여 클래스의 속성이나 메서드의 접근 범위를 지정할 수 있다. 
• public: 기본값. 어디서든 접근 가능
• private: 클래스 내부에서만 접근가능, 외부에서는 접근 불가능
• protected: 클래스 자신과 클래스를 상속받은 하위 클래스에서만 접근가능

class Person {
  public name: string;    // name 은 어디서든 접근 가능
  private age: number;    // age 는 클래스 내부에서만 접근 가능
  protected address: string; // address 는 하위 클래스에서도 접근 가능

  constructor(name: string, age: number, address: string) {
    this.name = name;
    this.age = age;
    this.address = address;
  }

  public greet() {
    console.log(`Hello, my name is ${this.name}`);
  }

  private getAge() {
    return this.age;
  }
}

 

 

const person = new Person("hihilong", 25, "123 Main St");
console.log(person.name); 
// "hihilong" 출력

console.log(person.age); 
// 오류: 'age'는 private 이므로 외부에서 접근 불가

console.log(person.address); 
// 오류: 'address'는 protected 이므로 외부에서 접근 불가

person.greet();              
// "Hello, my name is hihilong" 출력

 

---

 

4. 클래스에서 상속 구현

• extends 를 넣어서 구현함
• super : 클래스의 생성자에서 super()를 사용해 부모 클래스의 생성자를 호출하고, 부모 클래스의 속성을 초기화할 수 있다.

class Person {
  constructor(public name: string, public age: number) {}

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name: string, age: number, public grade: string) {
    super(name, age); // 부모 클래스의 생성자 호출
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}

 

 

const student = new Student("hihilong", 20, "A");
student.greet(); // "Hello, my name is hihilong"
student.study(); // "hihilong is studying."

 

🤔 super 에 대해서 좀 더 알아보자

• super 키워드는 부모 클래스를 참조하고 싶을 때 사용된다.
• 주로 자식클래스의 상속자에서 부모클래스의 생성자를 호출할 때 사용된다.
• 자식클래스가 생성될 때 모 클래스가 가진 속성과 메서드를 초기화하거나 상속받아 사용한다.
• 자식 클래스에서 부모 클래스의 기능을 확장하거나 덮어쓸 때 super를 활용하여 기존의 부모 클래스 기능을 유지할 수 있다.

 

 

 

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} 는 강아지.`);
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name); // 부모 클래스의 생성자를 호출 (Animal 클래스)
    this.breed = breed;
  }

  speak() {
    super.speak(); // 부모 클래스의 speak 메서드 호출
    console.log(`${this.name} 는 귀여워.`);
  }
}



const myDog = new Dog("흰둥이", "말티즈");
myDog.speak(); 
// 출력:
// "흰둥이 는 강아지."
// "흰둥이 는 귀여워."

 

 

여기서도 Dog 클래스는 Animal 클리스를 상속받는다.

Dog 클래스의 생성자에서 super(name) 호출하여 animal 클래스의 생성자를 실행한다.

이렇게 하면 Dog 클래스는 부모 클래스인 animal 의 name 속성을 상속받아 사용할 수 있다.

 

 

---

 

reference

책 <리액트 네이티브를 다루는 기술 - 김민준> 

https://ts.winterlood.com/