클래스형 컴포넌트 & 함수형 컴포넌트

• 함수형 컴포넌트

import React from 'react';

function App {
 const name = '리액트';
 return <div className="react">{name}</div>;
 
export default App;

• 클래스형 컴포넌트

import React, {Component} from 'react';

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

둘의 역할은 같다.

하지만,

차이점 : 클래스형컴포넌트의 경우 state 기능, lifecycle 기능 사용, 임의의 메소드 정의
클래스형컴포넌트는 render() 함수가 꼭 필요하고 , 그 안에 JSX 를 반환해야한다.

함수형 컴포넌트의 단점은 state기능 && lifecycle API를 사용할 수 없다는 것인데, 이는 Hooks 가 도입되면서 해결되었다.