Class/함수형 컴포넌트

우리는 기존에 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)를 해주거나, 화살표함수로 바꿔버려야 한다.