EtoC

Class와 OOP 본문

Language/JavaScript

Class와 OOP

게리드 2023. 8. 1. 14:04

코테스터디때 팀원들이 설명하면서 class,class하는데 나는 아직도 class가 뭔지 모른다.
딥다이브를 읽다보면 알겠지했는데 딥다이브에서 만나기전에 nestjs에서 만났다.
정확히 class가 뭘까?

1. Class

class 객체 지향 프로그래밍에서 객체를 정의하기 위한 상태와 함수로 구성된, 객체를 생성하기위해 변수와 함수를 정의하는 이다. tree 라고도하는데 객체를 만들기위한 설명서라고 생각하면된다.
class를 사용하여 새로운 객체(인스턴스)를 만들 수 있다.

클래스를 사용하는 이유는 동일한 종류의 객체를 여러개 만들어야하는경우, 같은 기능들을 하나로 묶어서 호풀하면 편하게 사용할수 있기 때문이다.

class name{설명}의 설명대로 만들면 new name()의 새로운 인스턴스(객체) 가 생성된다.

클래스 구성

class 객체명 {
   //클래스 안에는 함수와 변수를 넣어줄 수 있는데, 변수를 넣어줄 때는 변수를 선언(let, const)을 사용하지 않는다.
  변수
  함수(){}
}

//변수명에 객체명을 할당하면 그 객체안의 함수나 변수를 사용 할 수 있다.
const 변수명 = new 객체명()
//new 객체명() : new 연산자와 생성자 함수를 사용하여 새로운 객체를 생성한다.
변수명.변수 or 함수()
//클래스와 객체함수를 만들지 않아도 사용할 수 있는 객체가있는데, 이를 내장객체 라고한다.

뭐하러 이렇게 번거롭게한군데에 뭉쳐두나 싶은데 동일하거나 중복되는 객체를 여러개 만들어야할 경우 클래스를 사용하면 간단하고 쉽게 사용할 수 있다.
예를 들어 로그인기능을 뭉쳐둔 class 를 만들었을때, 클래스 내부에 존재하는 함수나 변수에 .을 사용하여 접근할 수 있다.

class loginAPI {
  login = () => {}; //로그인함수
  logout = () => {}; //로그아웃함수
  loginCheck = () => {}; //로그인상태확인함수
}

const mylogin = new MyloginAPI();
mylogin.login();
mylogin.logout();
mylogin.loginCheck();

요즘 프론트엔드의 트렌드가 class로 컴포넌트를 만들어서 조립한다고 한다.

💭 컴포넌트가 뭐야?

class의 constructor 함수

class 안에서 어떠한 함수 안에 또 다른 함수를 실행시키고자 할 때나, 특정 함수에서 변수값을 가지고 와야 할 때는 생성자 함수를 사용하면 된다.
내장함수 constructor() 생성자를 사용하여 초기값을 생성해 줄 수 있으며, myCart는 넘겨받은 인수와 함께 constructor가 자동으로 실행된다.

class BMWR18 {
  power = 200;

  //초기값 설정(생성자)
  constructor(basic) {
    //this를 사용하여 클래스 내부의 다른 함수or변수를 함수내에서 사용할 수 있다.
    this.power = basic;
  }

  speed = () => {
    console.log("카트 속도 : " + this.power * 3);
  };

  draft = () => {
    console.log("카트 끌기 : " + this.power / 2);
  };
}

class v1engine {
  power = 200;
  constructor(basic) {
    this.power = basic;
  }

  speed = () => {
    console.log("카트 속도 : " + this.power * 3);
  };

  draft = () => {
    console.log("카트 끌기 : " + this.power / 3);
  };
}

//완성품
const myCart = new BMWR18(150);
myCart.speed(); //'카트 속도 : 450'
myCart.draft(); //'카트 속도 : 75'

const myCart2 = new BMWR18(70);
myCart2.speed(); //'카트 속도 : 210'
myCart2.draft(); //'카트 속도 : 35'

const myCart3 = new v1engine(100);
myCart3.speed(); // '카트 속도 : 300'
myCart.draft(); //'카트 끌기 : 16.666666666666668'

위처럼 사용하여 여러개의 객체를 만들수 있는데 중복되는값을 중복되게하지 않기위해서는 어떻게 해야할까?
부모클래스를 사용하면 된다.

//부모 클래스
class Cart {
  power = 200;
  constructor(basic) {
    this.power = basic;
  }
  speed = () => {
    console.log("카트 속도 : " + this.power * 3);
  };
}

//extends를 사용하여 부모 class를 상속한다. 상속은 2개의 부모를 상속할 수 없다.
class BMWR18 extends Cart {
  //class 는 상속받더라도 각각의 constructor가 있다.
  //부모에게 요소를 넘기는 방법은 super를 사용한다.
  constructor(j) {
    super(j);
  }

  draft = () => {
    console.log("카트 끌기 : " + this.power / 2);
  };
}

class v1engine extends Cart {
  constructor(s) {
    super(s);
  }
  draft = () => {
    console.log("카트 끌기 : " + this.power / 3);
  };
}

const myCart = new BMWR18(150);
myCart.speed(); //'카트 속도 : 450'
myCart.draft(); //'카트 속도 : 360'
const myCart2 = new V1engine(150);
myCart.speed(); //'카트 끌기 : 75'
myCart.draft(); //'카트 끌기 : 40'

class strategy pattern

class chip {
 hibrid = () => {
   console.log("all status +1)
}

class cart {
  power = 100
  chipSet;

  constructor(a){
   this.chipSet =a// 2) 들어온 b는 chipSet에 들어간다.
   }
   speed = () => {
       this.chipSet.speed()//들어온값을 chipSet.을 써서 실행할 수 있다.
   }
 }

 const b = new chip()
 const cart2 = new cart(b)
 // 1) b가 위 construct의 a로 들어간다.

상속을더 많이 쓰곘지만 유지보수면에서는 전략패턴을 사용하는것이 코드를 수정하기좋다.

2. OOP

OOP(Object Oriented Programming), 객체지향 프로그래밍이란 객체와 내장객체를 사용하여 프로그래밍 하는것을 말한다.

const date = new Date(){
 date.getFullYear() //2023
  date.getMonth()+1 // 5
  date.getDate() // 8
}

const date = new Date() //객체(인스턴스) = 내장객체
app.post('/users/:id', (req,res) => {
    1. 로그인 상태인지 검증하는 코드
    2. 유저정보 가져오는코드
    }

app.post('/users/withdrawal', (req,res) => {
    1. 로그인 상태인지 검증하는 코드
    2. 유저 회원탈퇴 코드
    }

위 처럼 중복되는 검증하는 코드를 class로 그룹화해서 사용할 수 있다.