ES6 Class
오늘은 다음에 할 class 형 react 에 대비해서 ES6 에 도입된 자바 스크립트 문법중 하나인 class 에 대해서 알아보겠습니다 Class 는 ES6 부터 도입된 문법으로 java 의 객체지향 프로그램밍을 더욱 쉽고 간결하게 만들 수 있게 제공이 되었습니다 자바 class 처럼 객체를 생성하기 위한 템플릿이며 이를 통해 객체의 메서드 필드등을 정의할 수 있습니다
클래스 파일 정의
1
2
3
4
5
class HelloClass{
}
ES6의 클래스 파일은 이와 같이 정의할 수 있습니다
생성자 및 필드 선언 함수 선언
1
2
3
4
5
6
7
8
9
10
11
12
class HelloClass{
constructor(name){
this.name = name;
}
greeting(){
alert(`Hello ${this.name}`);
}
}
java 와 마찬가지로 생성자를 사용할 수 있습니다 이 생성자를 만들때 특정 파라미터를 받을 수 있으며 java 처럼 필드를 선언 할 수 없지만 필드 같이 사용할 수 있는 this.name 을 사용하면 현재 이 class 에 name 이라는 변수가 생기게 되는것입니다 이를 ES6 에서는 속성(필드) 라고 하며 이렇게 선언한것들은 해당 class 전역으로 사용할 수 있습니다 그리고 greeting() 이라는 것을 사용해서 내부에 함수를 생성할 수도 있습니다 그리고 그 내부 함수에서 속성에 정의된 name 이라는 필드값을 사용하는 모습입니다
필드 선언 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class HelloClass{
name;
age = 0;
constructor(name){
this.name = name;
}
greeting(){
alert(`Hello ${this.name}`);
}
}
그리고 위에 예제처럼 this.name 이라는 것을 사용해서 이 클래스에 묵시적인 name 필드를 만드는 것과 지금처럼 상단에 name 이라고 사용하는 명시적 방법또한 존재합니다
객체 생성 및 호출
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
</body>
<script src = "./hello.js"></script>
<script type="application/javascript">
const helloClass = new HelloClass("time");
const helloClass2 = new HelloClass();
helloClass.greeting();
helloClass2.greeting();
</script>
</html>
간단하게 표현을 하고자 한다 이때 HelloClass 를 java 와 흡사한 방식으로 객체를 생성할 수 있습니다 대신 변수 선언자는 const , let 만 사용할 수 있고 그 뒤는 java 에서 생성자를 생성하는 것과 동일하게 사용할 수 있습니다 하나는 helloClass 에 time 이라는 파라미터를 넘겨준 반면에 helloClass2 에는 빈 생성자를 호출해서 객체를 만들 수 있습니다 그리고 함수 호출은 보시는것과 같이 객체.함수명 이렇게 사용해서 호출을 하게 됩니다 이렇게 되면 helloClass 에 있는 함수들이 호출이 되며 결과는
alert(Hello time); alert(Hello undefined);` 이렇게 나오게 됩니다
상속
1
2
3
4
5
6
7
8
9
10
11
12
13
class Goodbye {
constructor(firstname){
this.firstname = firstname
}
sayGoodBye(){
alert(`GoodBye ${this.firstname}`);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class HelloClass extends Goodbye{
name;
age = 0;
constructor(name , firstname){
super(firstname);
this.name = name;
}
greeting(){
alert(`Hello ${this.name}`);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
</body>
<script src = "./goodbye.js"></script>
<script src = "./hello.js"></script>
<script type="application/javascript">
const helloClass = new HelloClass("time" , "Kim");
const helloClass2 = new HelloClass();
helloClass.greeting();
helloClass2.greeting();
helloClass.sayGoodBye();
helloClass2.sayGoodBye();
</script>
</html>
객체 지향 프로그래밍에서 가장 중요한것이 바로 상속이다 ES6 에서도 상속을 지원하니 한번 보도록 하자 지금 HelloClass 를 보면 extends 로 GoodBye 가 정의되어 있는 모습이 보입니다 그리고 GoodBye 클래스는 생성자에 firstname 필드 속성을 받아서 그 속성을 정의하고 하단 sayGoodBye 메서드를 호출하게 됩니다 이때 필드에 정의한 변수를 alert 하게 됩니다 그리고 HelloClass 로 오게 되면 하나의 생성자에 변화가 생겼습니다 firstname 이라는 필드를 받고 그 필드를 super 를 사용해서 부모 클래스로 올려주는 역활을 하고 있습니다 이는 java 에서도 super 로 동일한 역활을 하는 것입니다 그렇게 되면 이제 이들은 부모자식간의 상속이 완료된 상태이고 자식 클래스는 부모 클래스의 메서드를 호출 할 수 있게 됩니다
오늘은 ES6 Class 에 대해서 알아보았습니다 이는 다음시간 React 의 class 형 컴포넌트를 이해햐는데 도움이 될것입니다