[ react ] 클래스형 컴포넌트와 함수형 컴포넌트 차이

클래스형 컴포넌트

import React from "react";
import PropTypes from 'prop-types';

/* 
1. 클래스형 컴포넌트의 기본 뼈대 
2. React.Component를 상속받는 것.
3. 상속은 '클래스에 다른 클래스의 기능을 추가할 수 있게' 해준다.
4. React.Component에서 제공하는 기능들을 상속받아 사용하기 위함.
5. 클래스형 컴포넌트를 사용하는 것은 state를 사용하기 위함.
*/
class App extends React.Component {
  /* 
  1. render()  함수를 선언하지 않았는데 사용할 수 있는 이유:
    React.Component를 상속 받았기 때문에.
  2. 함수형 컴포넌트는 return 문이 JSX를 반환하지만 클래스형 컴포넌트는 
     render() 함수가 JSX를 반환한다.
  */
  render() {
    return <h1>I'm a class Component!</h1>;
  }
}

export default App;

• React.Component를 상속받기 때문에 리액트에서 제공하는 기능들을 모두 내것처럼 사용할 수 있다.
• 동적인 데이터를 다루는 state를 사용할 수 있다.
• 함수가 아닌 클래스이기 때문에 return문을 사용하지 않는다.
• 대신 React.Component에서 제공하는 render() 함수를 사용해서 JSX를 반환한다.
• render() 함수는 직접 정의하지 않았지만 리액트 컴포넌트를 상속 받았기 때문에 사용 가능하다.

함수형 컴포넌트

import React from 'react';

function Food() {
  return <h3>I like Potato</h3>;
}

function App() {
  return(
    <div>
      <h1>Hello World</h1>
      <Food fav="kimchi" something={true} papapapa={['hello', 1, 2, 3, 4, true]}/>
    </div>
  );
}

export default App;

• JSX를 return문을 사용해서 반환한다.
• 동적인 데이터를 다루는 state를 사용할 수 없다.
• React.Component에서 제공하는 기능을 사용하기 위해서는 손으로 모두 작성해서 사용해야 한다.