[ES6] CLASS , Extends, Super(), this

기본적으로 클래스는 blueprint이다. 클래스는 화려한 object라고 한다.

 

먼저 클래스를 만들면서 이해해 보자.

클래스는 생성자(constructor)를 가지고 있다.

User 라는 클래스를 만들고 constructor를 만들어 준다.

this에 관한것은 차후 다루기로 하고 일단 class는 this도 가지고 있다.

this.username 은 lee라고 명명해주고  console.log해주면 undefiend로 뜬다.

 

이제 할 일은 leeUser라는 User클래스의 instance를 생성해주겠다.

이렇게 instance를 생성해주고 나니 username에 대한 정보가 보인다.

그럼 instance는 무엇일까... 영어 사전을 보면 instance: 경우, 사례라고 뜬다.

직역해서 생각해보면 User라는 클래스의 하나의 사례~ 라고 생각하면 되겠다. 뭐 직역해도 이해가 된다.

User라는 class의 사례를 생성해냈다는 거다.

 

/* 음 심플하게 이전에 배웠던 파이썬을 생각해보면~ class는 하나의 구조이다.

예를들어  자동차라는 class가 있다면 이 클래스는 자동차를 추상화 하는 개념이다.

자동차는 엔진이 있고, 계기판, 핸들, 바퀴, 시트, 에어컨, 룸미러, 사이드미러, 본네트 등등~ 자동차라면 당연히 가지고 있는

구조가 있다. 그런데 자동차는 또 현대, 기아, 쌍용, 벤츠, 아우디 등등 여러 회사의 여러 제품들이 있다.

현대의 제너시스~ 쏘나타, 기아의 k8, k9 등등 이러한 자동차라는 구조를 가진 여러 다른 자동차들을

instance로 보면 될 듯 하다. */

 

class는 함수도 가질 수 있다. 그리고 원하는 만큼 instance도 생성이 가능하다.

leeUser, wooUser라는 instance를 생성해주고 각각 sayHello, sayHi 함수를 호출해 주면 저렇게 결과를 띄워준다.

 

그런데... class를 이용하지 않고 object로만 이게 가능하긴 하다..

nameObject라는 오브젝트 하나를 만들고~ property에 username과~ 각각의 함수들을 만들어주고

leeUser라는 object와 wooUser라는 object로도 class와 같이 실행이 가능하다.

 

자 그럼 어떤 차이가 있을까~

먼저 constructor에 name이라는 argument를 넣어주고 this.username = name이라고 바꿔보자

그리고 각각의 instance에 lee, woo 인자를 넣어주고 console.log 해보면 ~~

각각의 인스턴스에 이름이 생성되었다~... 이게 큰 차이? 라고 할 수 있으려나 싶지만 필자에게는 큰차이이다~object로는

이렇게 할 수 없다. 클래스는 기본적으로 object의 공장이다라고 생각하자

 

이번에는 sayHello함수를 살짝 바꿔보자.

템플릿 리터럴을 통해 this.username을 넣어주고 인스턴스로 함수를 실행하면 이렇게 결과가 나온다~ lee가 username에 들어가고

이 username을 함수에서 받아서 실행해준다.

 

잘 생각해보면 비슷한 구조를 가진 여러 오브젝트가 필요하다면~ 많은 오브젝트를 그때 그때 생성하는 것보다

클래스를 이용해 각자의 특징적인 변화만 가지고 여러 instance를 생성한다면 아주 쉽게 문제를 해결할 수 있을 듯 하다.

-----------------------------------------------------------------------------------------------------------------

 

이어서 this는 여러곳에서 쓰이지만 클래스안에서 기본적으로 볼 수 있고, 클래스 그 자체를 가리킨다.

언제든 추가하고 싶거나 클래스로부터 어떤 것을 불러오고 싶을때 this를 사용하면 된다.

주의할 점은 this는 무조건 클래스를 가리키지 않는다. class안에 있을 때에는 this는 클래스를 가리키지만

예를 들어 console.log(this)를 하게 되면 window객체가 나온다. 이때는 window자체를 가리키는 것이다.

this는 차후 더 다뤄보고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN

 

 

class를 배우는 지금은 class자체를 가리킨다고 기억하고 공부하자

 

이번에는 constructor를 더 많은 property를 줘서 만들어 보겠다.

유저네임, 라스트네임, 이메일, 패스워드드 등등을 만들어주고 생성자에 인자로 각각을 넣어준다.

그리고 프로필을 얻는 함수를 만들어서 실행해주면 콘솔창에 띄워줄수 있다.

 

이렇게 만든 정보를 수정도 가능하다. updatePassword라는 함수를 만들어서 현재 패스워드가 먼저 정의된 패스워드와 같으면

새로운 패스워드로 바꿀 수 있도록 함수를 설정 해주고 각각에 인자를 넣어준뒤 console.log해보면

이렇게 업데이트 된 정보를 띄울 수 있고 변경이 된다.

 

클래스 안에 원하는 만큼 많은 function을 추가할 수 있고 ~ 정의된 constructor의 properies를 이용할 수 있다.

한개의 유닛, 한개의 큰 object로 모든 함수를 클래스 안에 담을 수 있는 큰 장점이 있다.

-----------------------------------------------------------------------------------------------------------------

 

Extends

 extends: 확장하다 , 연장하다라는 사전적 의미가 있다.

mdn에 따르면 extends 키워드는 클래스를 다른 클래스의 자식으로 만들기위해 class선언 또는 class식에 사용된다 라고 한다.

extends 키워드는 내장 객체뿐 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용될 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/extends

extends - JavaScript | MDN

위에 만들어진 User 클래스를 extends해보자.

예를 들어 웹사이트에 수많은 유저가 있고 이것을 관리하는 admin유저도 있을 것이다.

User 클래스를 가지고 있고 User클래스의 어떤 부분을 약간 수정하고 싶으면 admin과 admin part person을 위한 클래스를

만들어야 한다. 그냥 쉽게 생각해 관리자 계정 클래스라고 생각하자.

 

자 Admin 클래스를 만들어주는데 extends User를 해주면 된다. 그리고 그 안에 함수 하나를 작성 해주겠다.

또한 leeUser의 정보를 인자로 넣어주자 그러면 User 클래스를 extends했기 때문에

안의 constructor정보와 함수들을 다 가져다 쓸 수 있다.

 

이렇게~~~~ Admin클래스에 정의된 함수는 User클래스에서는 쓰지 못하지만 Admin클래스에서만 사용가능하다

but! User클래스에 정의된 것은 Admin에서 쓸 수있다.~ Admin은 User의 자식이 되는 것이다.(필자가 이해한 바로는 이렇다)

그렇다면 Admin은 User 클래스의 내용을 수정 할 수 있는 것이다.

email 정보라던지 username이라던지~ 아까 사용했던 방법으로~

여기에 추가도 할 수 있는 것!!! 추가에 대해 알아보자

 

Admin 클래스에 constructor를 만들어주고  adminUser에 true라는 값을 넣어보자

에러가 발생했다.  음.. this에 접근하거나~ 생성자에 반환하기 전에 파생 클래스의 super constructor를 불러야 한다 라고 하는데

뭔 말인지 이제 알아보자.

니코쌤의 말로는 Admin클래스에 constructor를 생성함으로서, 기존의 constructor를 잃었기 때문이라고 한다.

---------------------------------------------------------------------------------------------------------------

 

-super

자 먼저 User 클래스를 refactoring해보자.

constructor에 인자를 오브젝트로 만들어서 넣어주는 것으로 바꿨다.

이제 필요한 것은 앞서 Admin 클래스에 constructor를 새로 생성함으로 인해 User클래스의 constructor가 overriding되어

에러가 발생했다. 에러문구에 super constructor를 부르라고 되어있는데

super를 알아보자.  음 객체지향에 관해 처음  필자가 접한 것은 python인데 거의 같다고 보면 되는건지 

python도 클래스에서 상속을 받을때 super() __init__ 함수를 통해 상속을 받았다.

자바스크립트도 super함수를 사용하면 된다고 한다. super함수는 오직 클래스에서만 사용하는 함수이다.

 

super의 역할은 부모클래스 여기서는 User클래스의 constructor를 호출하게 된다.

그럼 super를 사용해서 User의 constructor를 불러오고 추가로 Admin클래스에 constructor를 만들어 추가를해보자

 

Admin 클래스에 super함수를 이용해 받아올 constructor의 property를 obejct로 넣어주고  새로 적용할 property를 설정해주었다. 그리고 constructor에 들어갈 인자를 object로 넣어주고 ~

admin instance에 정보를 기입해줬다.

console.log로 몇가지를 확인해보면 제대로 잘 불러오고 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/super

super - JavaScript | MDN

 

---------------------------------------------------------------------------------------------------------------

this

자 그럼 이 class를 이용해서 html에 plus minus버튼을 만들어 숫자의 증감을 나타내보자.

 

먼저 html에 cou를 count, add, minus라는 아이디를 갖는 span과 버튼 두개를 만들어 주었다. 

Counter라는 클래스를 만들어주고 constructor는 default값 0을 갖는 count 프로퍼티와

각각의 아이디를 받는 프로퍼티들 그리고 addEventListeners라는 함수를 만들어서

클릭을 하게 되면 각 버튼을 클릭하면 증가 또는 감소를 할수 있게 increase, decrease함수를 만들고

이것을 html에 표현해 주도록 repaintCount함수를 만들어 준다.

Counter 클래스에 html의 각 태그들의 아이디를 인자로 주고 실행을 해보면~!

에러가 뜬다... this.repaintCount는 function이 아니라고 한다. 

흠.. 각 함수에서 console.log로 this를 확인해보자

기본적인 addEventListeners함수는 바로 실행이 되는데 this가 Class를 바로 가리키고 있다.

그런데.. 플러스버튼과 마이너스 버튼을 클릭하면 이것들이.. 클래스를 가리키는게 아니고 각각의 버튼들을 가리키고 있다.

자바스크립트를 하면 어려운 this.. 여기서 머리가 아프기 시작한다.

자바스크립트는 이벤트 리스너 안에서 this를 이용해 함수를 호출 하면 그 함수의 this는 class가 아닌 element를 가리키게 된다고 한다.

여기서 니코쌤은 팁을 주었는데 기억하자

 

얼마나 많은 이벤트 리스너가 있든 항상!! function을 arrow function으로 바꾸어 주면 된다고 한다.

그 이유는 arrow function은 항상 클래스에 연결된 this를 가지고 있다고 한다. (이부분... 어디선가 본 기억이.. 몇달전 python 공부하다가 어느 블로그에서 본 기억이 새록 새록 난다,..)

arrow function을 사용하지 않으면 함수의 this가 클래스를 참조하지 않고 함수를 참조해야 한다.

 

그럼 increase함수를 arrow function을 사용해서 눌러보자.

된다.. 첫번째는 이벤트리스너스 함수이고 두번째가 플러스 버튼을 눌러줬을때이다.~ 

arrow function을 활용하니 바로 class를 가리키게 된다.

 

정리하자... eventListener를 target에 handler함수를 적용할 때  event's handler는 this를 event target을 가르키게 한다.

그러므로 어지간하면 class안에서 함수는 arrow function을 써주자. 안전하게

이제 매우 잘 작동한다...

 

물론 클래스를 사용하지 않고도 이런 코드를 짤 수는 있다. 하지만 클래스를 이용한다면 비슷한 구조를 가진 instance를 여러개

생성하여 여러 곳에 재활용이 가능하다.

extends를 활용하여 기존 클래스를 이용하여 다른 클래스를 파생하여 다른 방향성을 가진 프로그램도 만들 수 있는 것이다.

음 어렵게만 느껴졌던 클래스가 역시 니코쌤이 짱이다.

니코쌤 왈 클래스를 많이 만들지는 않는다고 한다. react나 django같은 라이브러리는 이미 생성된 class를 가져다 쓰기에

또한 다른사람이 만들어 놓은 class를 가져다 사용하기도 한다고 한다. 

그래도 잘 이해해야 잘 사용 할 수 있으니!!! 확실히 짚고 넘어가자~!