Functional / Class Component

1️⃣ 함수형 컴포넌트
function으로 정의하고 return문 안에 jsx코드를 반환한다.

//함수형 컴포넌트
function qqq () {
	return(
    	<div> 안녕하세요~!! </div>
    )
}

//화살표 함수로 표현한것
const qqq = () => {
	return(
    	<div> 안녕하세요~!!</div>
    )
}

클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었는데, 이러한 단점은 앞서 언급한 것처럼 리액트 훅이 도입되면서 해결되었다

2️⃣ 클래스형 컴포넌트
class로 정의하고 render() 함수에서 jsx코드를 반환한다

class qqq extends Component {
	render(){
    	const name="react";
        return(
        	<div> 안녕하세요~!! </div>
        )
    }
}