우리는 기존에 export default function(){}이라고 적어컴포넌트를 만들었다.
그런데 함수형이 나오기 전에는 class형컴포넌트를 사용했다고 한다.
요즈음에는 거의 함수형으로 되어있는경우가 많으나, 오래전부터 이어진 서비스의 경우 클래스형을 사용한 부분이 남아있는것을 볼 수 있으니 우리는 이것을 볼줄도 알아야하고, 함수형으로는 어떻게 바꿀 수 있는지를 알아야한다
그렇다면 class는 무엇인가?
class
: 물건을 만드는 설명서.
calss 상품명 { // 만드는 방법 }
이 설명서를 통해 new 상품명() 하면 해당 상품이 만들어진다.
이때, 이 안에 함수나 변수를 넣을 수 있는데, 그때는 const 나 let, function이라는것을 쓰지 않고 사용한다.
이렇게하여 컴포넌트를 만들 수 있다.
실제로 new 하고 꺼내오는 애들이 있는데 이것이 함수형일것같다는 생각을 했다.
const date = new Date()로
date.getFullYear() 라고하면 date에 담은 new Date에서 getFullYear라는 함수를 꺼내올 수 있는데,이때 date는 객체 즉, 인스턴스 라고하고, 그 뒤에있는것을 메서드 라고한다.
메서드란 class에서 만든 함수를 의미!
이렇게꺼내와 사용이 가능하게 기능이 유사한 함수들은 class로 묶어 사용한다면 유지보수가 수월하게된다.
이렇게 class라는 이름으로 객체를 만들어 사용하는 이러한 방법을 객체지향 프로그래밍
OOP라고한다.
class Monster { power = 50; attack(){ console.log("공격") } }
class를 하나 만들었다.
그리고 이 기능을 가지는 다른 class를 하나 더 만들어본다.
그대로 복사해야할까??
class에서는 extends 라는 기능이 존재한다.
상속이라는개념이다.
즉, 뒤의것을 상속받는다는 의미이다.
class Super extends Monster{ run(){ console.log("도망간다") } attack(){ console.log("필살기!!") } }
이렇게 사용한다면 Super이라는 클래스는 Monster라는 class를상속받아 해당클래스에 있는 기능들을 전부 가지게된다.
따라서 이것을
const 변수명 = new Super() 이라고 선언하고 각각을 불러온다면 Super에 적어주지않은 Monster의 값들을 불러올 수 있다.
그런데, 상속하는 Monster에도 attack이라는 함수가 있고, 상속받는 Super에도 같은 함수가 있는데 이 경우는 어떻게 되는것일까?
이때 attack을 꺼내보면 Super의 attack이 나온다.
??
이것은 이미 상속받아온 같은 함수가 있으나 다시 선언해여 오버라이딩(덮어쓰기)된것이다.
this
함수형에는 변수나 함수앞에 this가 생략되어있다.
따라서 this.~ 하면 가져올 수 있는데, 실행한 주체에따라 왔다갔다한다.
이것을 동적 this라고한다.
변화하는 this를 class로 고정하기 위해서는
.bind(this)를 해주거나, 화살표함수로 바꿔버려야 한다.
