React 클래스형 컴포넌트와 함수형 컴포넌트 특징

<리엑트 로고>

React에는 컴포넌트를 선언하는 방식이 클래스형, 함수형 두 가지가 있습니다. 
과거 React는 함수형 컴포넌트는 사용할 수 없었던 state와 Life Cycle을 사용할 수 있어 클래스형 컴포넌트를 주로 사용하였지만, React 16.8 버전 이후 'Hook' 이 도입되면서 함수형 컴포넌트도 state와 Life Cycle을 사용할 수 있게 됨과 동시에 클래스형 컴포넌트보다 더 편해진 방법으로 사용할 수 있게 되었습니다. 
React 공식문서에서는 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있다.

👉  클래스형 컴포넌트

1. class를 선언해야한다.
2. Component를 상속 받아야한다.
3. render() 메소드가 반드시 존재해야한다.
4. state, Life Cycle 사용 가능
    [프레임워크 및 라이브러리 공부/React] - React 클래스형 컴포넌트 생명주기 - Life Cycle
5. 메모리 자원이 함수형 컴포넌트에 비해 많이 사용
6. 컴포넌트가 복잡하며, 로직의 재사용이 힘듦

import React, { Component } from 'react';

class SubscribeButton extends React.Component {
  showMessage = () => {
    alert('Subscribed' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Subscribe</button>;
  }
}

export default SubscribeButton;

👉  함수형 컴포넌트

1. 클래스형 컴포넌트에 비해 선언 방식이 간단하다.
2. state, Life Cycle 사용 불가능 (React 16.8 버전 이후 'hook'으로 대체 사용가능)
3. 메모리 자원이 클래스 컴포넌트에 비해 덜 사용
4. 재사용성과 확장성이 높음(React 16.8 버전 이후 'hook' 이후)

import React from 'react';

function SubscribeButton(props) {
  const showMessage = () => {
    alert('Subscribed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Subscribe</button>
  );
}

export default SubscribeButton;

오늘은 React 컴포넌트 선언 방식인 클래스 컴포넌트과 함수 컴포넌트에 대해서 알아보았다.
언제나 피드백은 환영입니다.

긴글 읽어주셔서 감사합니다.
모두 해피 코딩하세요~