클래스

fromzoo·2020년 11월 17일

목록 보기

9/16

📖 클래스

클래스 소개

클래스란 ES2015 (ES6) 부터 소개됐던 최신 문법
클래스가 하는 역할은 기본적으로 인스턴스 생성해주는 역할

class  Person {
// 클래스 로직
	constructor(name,age) { // 초기화 메서드
		console.log('생성되었습니다.');
		this.name  =  name;
		this.age  =  age;
	}
}

// 인스턴스를 생성했을때 constructor 안에 있는 로직이 실행된다.
const fromzoo = new  Person('joo',30)
console.log(fromzoo);

콘솔로 확인 결과 넘겨준 인자 name과 age 값으로 객체를 생성해줬다.

자바스크립트 프로토타입 소개

user 라는 객체 생성

const user = {name : 'fromzoo', age: 100}

user의 권한을 관리하는 새로운 객체 admin 생성

// 기존에 user라는 속성에 role이라는 정보 추가
const admin = {name : 'fromzoo', age: 100, role:'admin' }

하지만 새로운 객체 admin 과 user의 객체는 코드가 중복된다.

이렇게 객체들을 활용할때 중복되는 코드들에 대해서 줄일 수 있는 방법이 필요하다.

이러한 관점에서 자바스크립트에서 지향하는 프로토타입을 이용한 상속을 알아보자.

admin 이라는 빈객체 생성

const admin = {};

중복되는 코드를 줄이기 위해서 user의 정보들을 admin에 재활용할 수 있도록 한다.

admin.__proto__  =  user
admin.age  // 100
admin.name // fromzoo

user에서 정의했던 상위 오브젝트를 prototype으로 admin에서 내려받아서 사용한다 이것을 상속이라고 한다.

admin.role  =  'admin'

추가적으로 필요한 객체의 정보만 admin에 저장해줬다.

이러한 관점에서 object, array, string 같은 데이터 타입에 대한 속성과 api들을 prototype으로 상속받아서 사용했다는 것을 알 수 있다.

자바스크립트 프로토타입의 활용 사례

const obj = { a: 10 }

크롬 개발자 도구에서 객체를 설정하고,

Object.keys(obj) // ['a']
obj.hasOwnProperty('a') // true

객체관련 함수들을 사용할 수 있게되는데,

obj의 프로토타입이 Object (객체)로 되어있기 때문에 Object라는 최상위 객체에서 제공하고 있는 메서드나 속성들을 사용할 수 있는 것이다.

또한 이것을 Built-in Javascript API 혹은 Javascript Native API라고 부른다.

이런점을 참고해서 단순히 객체 정보를 확장하는 것 뿐만아니라 실제 정의되어있는 기능들을 활용하려고 사용하고 있었다라고 이해하면 된다.

프로토타입과 클래스와의 관계

기존문법

function  Person(name,age) {
	this.name  =  name;
	this.age  =  age;
}
const capt = new  Person('캡틴',100);

기존문법에서도 프로토타입을 이용한 상속같은 개념을 생성자 함수를 이용해 구현할 수 있었다.

클래스 문법

class  Person {
	constructor(name,age) {

		console.log('생성되었습니다.');
		this.name  =  name;
		this.age  =  age;
	} 
}
const seho = new  Person('세호',30)
console.log(seho);

객체지향 언어에 익숙한 사람들이 자바스크립트에 접근하기 수월하게 하기 위해 클래스 기반에 문법을 제공 했던 것
- 클래스를 babel 같은 프로그램으로 돌려서 보면 기존에 생성자 함수를 썼다는 것을 알 수 있음
프로토타입 기반 언어의 특성은 클래스문법을 사용한다고해서 바뀌지 않는다. 즉 기존에 프로토타입 기반의 상속은 그래도 유지하고 있다고 이해하면 된다.
그렇기때문에 생성자 함수를 클래스 문법을 사용하지 않더라도 충분히 계속 만들어 나갈 수 있다.

타입스크립트의 클래스 문법

클래스최상단에 사용할 속성, 멤버변수를 정의해줘야한다.

class Person {
	// 멤버 변수
	name :  string;
	age :  number; 
}

두번째 차이점 파라미터에 대한 타입도 구체적으로 정의

class Person {
	name :  string;
	age :  number;
	
	// 파라미터 타입 정의
	constructor(name:string, age:number) {
		this.name  = name;
		this.age  = age;
	} 
}

멤버변수에 대한 유효 범위까지 설정할 수 있다.

class Person {
	private name :  string;
	public age :  number;
	readonly log : string
	
	// 파라미터 타입 정의
	constructor(name:string, age:number) {
		this.name  = name;
		this.age  = age;
	} 
}

private - 클래스 안에서만 사용싶을때 정의
public - 기본적으로 정의 (혹은 protected)
readonly - 읽기 접근만 할 수 있고, 값을 변경할 수 없다.

이런식으로변수의 접근 범위까지 제한할 수 있는게 타입스크립트에서 제공하는 문법이다.

React와 Vue.js의 클래스 문법과 최신 문법

React

// 리액트 예전 문법 - 클래스 기반 코드
class  App  extends RTCIceCandidate.Component { }


// 리액트 최신 문법 - 훅 기반의 함수형 코드
function  App() {
	return <div>Hello World</div>
}

Vue.js

// 최근 추가될 컴포지션 api
new  Vue({
	el:'',
	setup() { // 추가적인 옵션 사용
	}
})

리액트나 뷰에서 새로운 형태의 문법이 나오고 최근에는 클래스 문법을 볼 일이 많지 않을 수 있다.

🔍 참고 출처

fromzoo

프론트엔드 주니어 개발자 🚀

이전 포스트

이넘(Enums)

다음 포스트

클래스

typescript