[React] 함수형 컴포넌트 vs 클래스형 컴포넌트

React에서 컴포넌트를 선언하는 방식은 2가지로 함수형으로 작성하거나 클래스형으로 작성할 수 있습니다.

함수형 컴포넌트

함수형 컴포넌트는 상태(state)와 라이프사이클을 갖지 않기 때문에 메모리 클래스형 컴포넌트에 비해 자원을 덜 사용하고, 선언하기 편합니다.

import React from 'react';

function Test() {
  const name = 'React';
  return <div>{name}</div>;
}

export default Test;

Hook은 리액트 v16.8 업데이트에서 새로 추가된 기능입니다.
Hook은 class를 작성하지 않고도 상태(state)와 라이프사이클 기능을 사용할 수 있게 해주는 함수입니다.

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있습니다.

클래스형 컴포넌트

클래스형 컴포넌트는 함수형 컴포넌트와 달리 상태(state)와 라이프사이클(생명 주기 메서드)을 갖습니다.
클래스형 컴포넌트에서는 render() 함수가 반드시 있어야 하고, render() 함수는 JSX를 반환해야 합니다.

import React, { Component } from 'react';

class Test extends Component {
  state = {
    name: 'React',
  };
  render() {
    return <div>{this.state.name}</div>;
  }
}

export default Test;