---16일차---
밸~하~
밸로그 여러분 안녕하세요!
오늘의 주제는 바로 ! 클래스 컴포넌트와 함수형 컴포넌트입니다!

바로 출발해 볼까요?!

1.클래스 컴포넌트란?

클래스컴포넌트란 무엇일까요??

먼저 클래스 컴포넌트를 보기이전에 클래스에 대해서 알아보겠습니다!

클래스란 무엇일까요?
쉽게말씀드리자면
물건 만드는 설명서라고 할수있습니다!

예를들어
붕어빵을 만든다고 해봅시다
그러면

class 붕어빵{
//만드는 방법
}

new 붕어빵()

붕어빵을 만드는 방법이 클래스안에 들어가게되고 new를 사용해 완성품인 붕어빵을 만들수있게 되는겁니다!

또 다른 예제를 봐볼까요??
이번엔 게임안의 몬스터를 만든다고 해봅시다

class 몬스터{
//만드는 방법
}

new 몬스터

몬스터를 어떻게 만들지 체력은 몇이고 공격력은 몇인지 그리고 어떻게 공격하는지를 넣을수 있겠죠??

클래스를 만들어놓으면 장점이 한번 만들어놓은 클래스를 그대로 사용하여 똑같은 물건을 생성할수 있다는겁니다
즉 재사용성이 높아진다는건데요 !

또한 메서드도 사용이 가능한데요
어떻게 사용할까요?
코드를 통해서 봐보겠습니다

const date =new Date()
date.getFullYear()
date.getMonth()

여기서 new Date()는 자바스크립트 내부에서 이미 만들어져있는 함수입니다 즉
내장 객체라는것인데요
그럼 const date는 무엇일까요?
내장객체를 받아주는 instance라고 할수있습니다!

어떻게 보자면 클래스는 그룹핑해놓는다고 생각하시면 이해가 쉬우실겁니다!
그러면, 클래스에대해서 조금더 친숙하게 접근하실수 있겠죠??

이렇게 객체를 사용해서 프로그래밍을 하는것을
OOP-Object Oriented Programming(객체 지향 프로그래밍)
이라고 합니다 !

자! 그럼 react에서는 어떻게 클래스를 사용할수 있을까요??

단순히 클래스 명만 적으면 될까요??
아쉽게도 단순 클래스라는 것만으로는 안됍니다!
그럼 어떻게 할까요??

바로

export default class ClassCounterPage{
	power=50
    qqq(){
    
}
render(){
return(<div>asdasd</div>
}
}

아래보이는
render()라는 것을 통해서 사용할수 있습니다
단 사용하기 이전에
import를 통해서 어떤것을 받아와야하는데요
그게 바로 리엑트에서 제공하는

import {Component} from 'react'

라는 것을 넣어줘야합니다 !
그럼 어떻게 될까요??

import {Component} from 'react'

export default class ClassCounterPage extends Component{
	power=50
    qqq(){
    
}
render(){
return(<div>asdasd</div>
}
}

또한 다른곳에서 선언한 클래스를 다른 클래스에서 사용을 하려면 어떻게 해야할까요??
네! 여러분들이 생각하시는 바로 그거입니다!
바로 객체지향에서의 상속이라는 개념인데요
react에서는 extends를 사용하여 외부 class에 있는 것들을 받아올수있습니다
예를 들어볼까요??

class AAA{
	power=50
    
    attack(){
    }
}

class BBB extends AAA{
	run()
}

이렇게 하면 BBB라는 클래스가 AAA라는 클래스를 상속받아서 BBB클래스 에서도 AAA의 클래스에 있는 내용들을 사용할수 있게 되겠죠??

그럼 여러개를 동시에 상속받을수 있을까요??
음...아쉽게도 자바스크립트에서는 다중상속을 지원하지 않습니다 ㅜㅜ
물론 다중상속을 받을수 있는 언어들이 있긴하지만 대부분의 언어에서는 다중상속을 지원하고있지 않기때문에
오늘 포스팅에는 다중상속에 대해서 다루지는 않겠습니다 ㅜㅜ

그다음 볼것은 함수형 컴포넌트입니다!

2.함수형 컴포넌트

그럼 이번에 보는 함수형 컴포넌트는 도대체 어떤 것일까요??

클래스형 컴포넌트가 클래스를 사용했다면
함수형 컴포넌트는 함수를 사용하겠죠?!

가장 큰 차이는 클래스형 컴포넌트에서 사욯했던 extends라는것이 사라지고 함수명으로 바꿔서 사용을 하게됩니다
그렇다면 컴포넌트를 삽입할 필요없이 사용할수있겠죠??
클래스 컴포넌트에서는 component라는 곳에서 state를 가져왔다면
함수형 컴포넌트에서는 state를 직접 개발자가 선언을 해서 사용할수가 있습니다!
이런것을 훅이라고 하는데요

이렇게요

export default function ClassCounterPage (){
	const[count,setCount]=useState(0)
   
   

return(<div>asdasd</div>)
}

또한 this가 없어지고 바로 state를 불러올수 있겠죠?!
필요한것만 선언해서 가지고 올수 있으니 훨씬 용량도 줄어들고 보기에도 개발시 사용하고싶은 함수의 위치를 정확히 알려주게 되니 일석 이조가 되는것이지요

자! 오늘은 함수형컴포넌트와 클래스컴포넌트에 대해서 알아보았습니다!
함수형컴포넌트와 클래스컴포넌트! 요즘에는 대부분 함수형 컴포넌트를 적용하고있는데요!
클래스 컴포넌트를 알아야하는이유는 나중에 클래스 컴포넌트를 함수형컴포넌트로 바꾸는 일을할수도있기에 알아놓으시면 좋으실것같습니당

오늘의 포스팅은 여기까~~지~

그럼 이만
밸로그 여러분 안녕~
밸~바!