선언 방식

클래스형

1. class 키워드 필요
2. component 에서 상속 받아 옴
3. render() method 필요함

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

함수형

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

일반적인 차이

클래스형

1. state, lifecycle 사용할 수 있다.
2. 임의 메소드를 정의할 수 있다.

함수형

1. 클래스형 컴포넌트보다 선언하기가 편하다.
2. 클래스형 보다 함수형 컴포넌트가 더 메모리를 덜 사용하고, 파일 크기가 더 작다.(하지만 크게 유의미한 부분은 아님)
3. state와 lifecycle 을 사용할 수 없다 ➡️ hook 으로 해결가능