React - 함수형과 클래스형 Component

컴포넌트를 선언할 때, 두 가지 모두 같은 모습의 결과물을 보여줄 수 있지만 본질적으로 차이점이 존재하여 짚고 넘어간다.

클래스형 Component

(1) 반드시 render() 함수를 필요로 하고 그 안에 return 값이 들어간다.

(2) state 기능과 생명주기(Life Cycle) api를 제공한다.

(3) 임의의 메서드 정의 가능.

(4) ES6의 class 기능을 똑같이 사용할 수 있다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default App;

함수형 Component

(1) 클래스형 Component에 비해 문법의 제약이 덜 해서 선언이 쉽다.

(2) 비교적 메모리 자원을 덜 차지

(3) 빌드 후에 배포 결과물이 작다.

import React from 'react';

function App() {
  return <div>hello, World!</div>;
}

export default App;

React Hooks가 나온 뒤로, 함수형 컴포넌트와 Hooks의 조합이 권장되고 있다.

참고
1) https://eodevelop.tistory.com/68
2) https://devowen.com/298?category=778540
3) https://www.hamadevelop.me/reactfunctionclassdiff/
4) https://ko.reactjs.org/docs/components-and-props.html