클래스형

import React, { Component } from 'react';

class App extends Component {
  render() { 
    const hello = 'Hello world!';
    return <div>{hello}</div>;
  }
}

export default App;

• state 기능 및 라이프 사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의할 수 있다.
• render 함수 안에 화면에 보여줄 JSX 구현

함수형

import React from 'react';

function App() {
  const hello = 'Hello world';
  return <div>{hello}</div>;
}

export default App;

• 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원을 덜 사용한다
• 리액트 훅이 도입되면서 과거에는 불가하던 state와 라이프사이클 API를 사용할 수 있게 되었다.

☝🏻 리액트 훅의 도입으로 인해 클래스형에서만 가능하던 state 기능 및 라이프 사이클 기능을 함수형에서도 구현하게 되면서 선언의 편의성(코드 통일성), 적은 메모리 자원 사용의 이유로 함수형 컴포넌트를 권장하고 있다.