★[프론트엔드 기초]React + TypeScript (7) - 클래스와 객체

클래스(붕어빵 틀)는 객체의 뼈대, 객체(붕어빵)는 클래스의 실체

 

// 직원 정보를 위한 변수 선언

let empName: string;

let age: number;

let empJob: string;

// 직원 정보 출력 함수

function printEmp(empName: string, age: number, empJob: string): void {

    console.log(`${empName}의 나이는 ${age}세이고 직업은 ${empJob}입니다.`);

}

oop.ts

// 직원 정보를 위한 변수 선언

var empName;

var age;

var empJob;

// 직원 정보 출력 함수

function printEmp(empName, age, empJob) {

    console.log("".concat(empName, "\uC758 \uB098\uC774\uB294 ").concat(age, "\uC138\uC774\uACE0 \uC9C1\uC5C5\uC740 ").concat(empJob, "\uC785\uB2C8\uB2E4."));

}

 

printEmp('현서', 25, '학생');

oop.js

 

>>>너무 복잡하다.

 

클래스

클래스 내에서는 매개변수가 필요없다.

class Employee {
    empName: string;
    age: number;
    empJob: string;
  
    printEmp(): void {
      console.log(this.empName + "의 나이는 " + this.age + "세이고 직업은 " + this.empJob + "입니다.");
    }
  }

  let employee1 = new Employee();
  employee1.empName = "홍길동";
  employee1.age = 30;
  employee1.empJob = "개발자";
  
  employee1.printEmp();

 

 

생성자

// 멤버 변수 == 속성 == 프로퍼티
// 멤버 함수 == 메소드

class Employee {
    empName: string;
    age: number;
    empJob: string;

    //생성자
    constructor(empName : string, age : number, empJob: string) {
        this.empName = empName;
        this.age = age;
        this.empJob = empJob;
    }
  
    printEmp(): void {
      console.log(this.empName + "의 나이는 " + this.age + "세이고 직업은 " + this.empJob + "입니다.");
    }
  }

  let employee1 = new Employee('kim', 30, 'developer');

  employee1.printEmp();

 

접근지정자

//접근지정자 : private, public, protected : 데이터 접근을 제한

//private : 클래스 내부(나만)에서만 접근 가능

//public : 클래스 외부에서 접근 가능

//protected : 자식 클래스(자식만)에서 접근 가능

 

class Employee {
    private empName: string;
    private age: number;
    private empJob: string;

멤버변수 empName, empAge, empJob 앞에 "private"을 붙였다.

이제 클래스의 private인 멤버변수를 접근하면 에러가 발생한다.

Getter와 Setter

 

• Getter: 객체의 속성 값을 가져올 때 사용하는 함수
• Setter: 객체의 속성 값을 설정할 때 사용하는 함수

// 멤버 변수 == 속성 == 프로퍼티
// 멤버 함수 == 메소드

class Employee {
    private _empName: string;
    private _age: number;
    private _empJob: string;

    //생성자
    constructor(empName : string, age? : number, empJob? : string) {
        this._empName = empName;
        this._age = age;
        this._empJob = empJob;
    }
  //getter, setter
    get empName(){ //getter
        return this._empName;
    }
    set empName(val : string) { //setter
        this._empName = val;
}

    printEmp(): void {
      console.log(this.empName + "의 나이는 " + this.age + "세이고 직업은 " + this.empJob + "입니다.");
    }
  }

//접근지정자 : private, public, protected : 데이터 접근을 제한
//private : 클래스 내부(나만)에서만 접근 가능
//public : 클래스 외부에서 접근 가능
//protected : 자식 클래스(자식만)에서 접근 가능

  let employee1 = new Employee('kim', 30, 'developer');

  employee1.empName = 'lee';

  employee1.printEmp();

 

 

>>간결하게 정리

// 멤버 변수 == 속성 == 프로퍼티
// 멤버 함수 == 메소드

class Employee {
    //생성자
    constructor(
        private _empName : string, 
        private _age: number, 
        private _empJob : string) 
        {

    }
  //getter, setter
    get empName(){ //getter
        return this._empName;
    }
    set empName(val : string) { //setter
        this._empName = val;
}

    printEmp(): void {
      console.log(this.empName + "의 나이는 " + this.age + "세이고 직업은 " + this.empJob + "입니다.");
    }
  }

//접근지정자 : private, public, protected : 데이터 접근을 제한
//private : 클래스 내부(나만)에서만 접근 가능
//public : 클래스 외부에서 접근 가능
//protected : 자식 클래스(자식만)에서 접근 가능

  let employee1 = new Employee('kim', 30, 'developer');

  employee1.empName = 'lee';

  employee1.printEmp();