[RN] 타입스크립트 개념 정리 (5) - 클래스 의 this 와 new

1. this 란 ?

• 클래스 내부에서 현재 객체를 참조하는 데 사용
• 쉽게 말해, 클래스 안에서 this를 사용하면 그 클래스의 인스턴스를 가리킨다.
• this 는 클래스의 속성이나 메서드에 접근할 때 사용된다.
• 클래스 내부에서 메서드를 호출하거나 속성에 접근할 때, this 를 사용하여 해당 객체의 속성이나 메서드를 참조할 수 있다.

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name; // 'this.name'은 이 클래스의 'name' 속성을 참조함
    this.age = age;   // 'this.age'은 이 클래스의 'age' 속성을 참조함
  }

  greet() {
    console.log(`여기는 ${this.name} 블로그얌 그리고 나는 ${this.age} 살이야.`);
  }
}

const person = new Person("hihilong", 25);
person.greet(); // "여기는 hihilong 의 블로그얌 그리고 나는 25살이야"

 

만약에 this 를 사용하지 않는다면 ? ?

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    // name = name; // 오류 발생: name이 정의되지 않음
  }
}

 

정의되지 않았다는 오류가 발생한담 ~

 

2. 화살표 함수 내에서의 this  ??

일반 함수 에서 this 를 사용했을 때의 발생할 수 있는 문제점을 생각해보자.

객체의 메서드로서 호출될 때, this는 그 메서드를 호출한 객체를 가리킨다.

만약 객체의 메서드로 호출이 되지 않으면 this 는 전역 객체를 가리켜서 undefined 가 될 수도 있다.

 

class Person {
  name: string;

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

  greetWithDelay() {
    setTimeout(function() {
      console.log(`안녕 여기는 ${this.name} 블로그야! `);
    }, 1000);
  }
}

const person = new Person("hihilong");
person.greetWithDelay(); 
// 1초 후 
// "안녕 여기는 undefined 블로그야!" 출력

 

위 코드에서 setTimeout 내부의 함수는 일반 함수이기 때문에, 그 안에서의 this는 Person 객체를 가리키지 않는다.

this는 전역 객체(window 또는 undefined)를 가리키게 된다..

이 때문에 this.name이 undefined가 됨

 

 

 

📌 화살표 함수 내에서의 this 를 사용하면 ? ?

• 화살표 함수는 this를 정적으로 바인딩하여, 상위 스코프의 this를 그대로 사용한다.
• 따라서 .. 화살표함수는 this 를 재정의하지않고 화살표 함수가 선언된 렉시컬환경(상위스코프(에서의 this 를 사용하게 된다.
• 즉, this가 Person 객체를 가리키도록 유지할 수 있게 해준다.
• 이렇게 되면 ~ 비동기콜백이나 이벤트 핸들러에서 this 를 일관되게 유지할수있다.

 

 

class Person {
  name: string;

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

  greetWithDelay() {
    setTimeout(() => {
      console.log(`안녕 여기는  ${this.name} 블로그야`);
    }, 1000);
  }
}

const person = new Person("혜롱이");
person.greetWithDelay(); 
// 1초 후 "안녕 여기는 혜롱이 블로그야" 출력

 

---

 

 

3. new 키워드란?

• 클래스 또는 생성자 함수를 사용하여 새로운 객체를 생성할 때 사용된다.
• new 를 사용하면 클래스를 기반으로 새로운 인스턴스를 만들 수 있다.
• new 를 사용하면 클래스의 생성자가 호출되고.. 생성자는 객체가 생성될 때 초기화 작업을 수행할 수 있도록 한다.
• 생성된 객체는 자동으로 this 에 바인딩이 되어 클래스의 필드와 메서드를 사용할 수 있게 된다.

class Person {
  name: string;
  age: number;

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

  greet() {
    console.log(`안녕 ${this.name} 블로그얌 ${this.age} 살이얌.`);
  }
}

const person = new Person("hihilong", 25); // 'new'를 사용하여 'Person' 클래스의 인스턴스를 생성
person.greet(); // "안녕, hihilong블로그얌 25살이얌 "

 

🤔 언제 new를 사용하는감?

1️⃣ 클래스를 인스턴스화 

• new 를 사용하여 클래스를 인스턴스화 (= 새로운 객체 생성 ) 한다.
• 클래스를 직접 사용하는 대신 new 를 통해 생성된 객체를 사용할 수 있다.

 

2️⃣ 객체 초기화 필요

• 생성자에서 객체의 초기 상태 설정하는 경우
• 생성자에서 매개변수를 받아 객체의 속성에 값을 할당하는 식으로 초기화

 

 

🤔 new가 하는 일? 

• 새로운 빈 객체 생성할 수 잇다.=>  new 키워드를 사용하면 메모리에서 새로운 빈 객체가 생성
• 프로토타입 연결할 수 있다. =>  생성된 객체는 자동으로 해당 클래스의 프로토타입과 연결
• 생성자 호출 => 클래스의 생성자가 호출되어 객체를 초기화
• this 반환: 생성자가 작업을 완료하면 자동으로 새로 생성된 객체(this)가 반환

 

만약 new 없이 호출한다면 ? ?

 

const person = Person("Alice", 25); 
// 오류: 'Person'은 클래스이므로 'new' 키워드를 사용해야 함

 

클래스를 new 없이 호출하면 TypeScript에서는 오류가 발생한다..

이는 생성자가 함수처럼 호출될 수 없기 때문.

 

 

 

 

---

 

reference

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

https://ts.winterlood.com/