Functional vs Class component

함수형? 클래스형?

리액트 컴포넌트는 클래스형 컴포넌트, 함수형 컴포넌트 두 가지로 작성할 수 있습니다. 클래스형 컴포넌트는 상태값(state)을 가질 수 있으며, 리액트 컴포넌트의 생명주기함수를 사용할 수 있습니다. 하지만 함수형 컴포넌트는 이 모든 일들을 할 수 없습니다.

리액트 버전이 16.8버전으로 업데이트 후 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명주기함수를 사용할 수 있게 되었습니다.

함수형 컴포넌트를 선호하는 이유

저는 최근에 개발을 하면서 대부분 함수형 컴포넌트를 사용했습니다. 그 이유로는 함수형 컴포넌트는 state를 사용하지 않으며 데이터를 받아서 UI에 뿌려줍니다. 하지만 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 로직을 가지고 있습니다. 이러한 이유로 현재는 공식 문서에서도 함수형 컴포넌트+훅(hook)을 함께 사용하는 방법을 권장하고 있습니다.

Functional Component

• 함수형 컴포넌트에서는 JSX를 return문을 사용해서 반환해줍니다.
• state와 lifecycle관련 기능을 사용할 수 없습니다. 이 문제는 Hook을 이용하여 해결합니다.
• 클래스형 컴포넌트에 비해 메모리 자원을 적게 사용합니다.

import React from 'react';

type HelloProp = {
  name: string;
};

export default function Hello({ name = '홍길동' }: HelloProp) {
  return <div>안녕하세요 {name}</div>;
}

Class Component

• Component를 상속받아야 합니다.
• render 메소드를 반드시 사용해야합니다.
• 함수형 컴포넌트에 비해 메모리 자원을 많이 사용합니다.

import React, { Component } from 'react';

type HelloProp = {
  name: string;
};

class Hello extends Component<HelloProp> {
  static defaultProps = {
    name: '홍길동',
  };
  render() {
    const { name } = this.props;
    return <div>안녕하세요 {name}</div>;
  }
}

export default Hello;