React를 사용하다 보면 어떨 땐, Component의 시작이 function으로 시작하고 어떨 땐 class로 시작한다. 이 두 형식이 어떻게 다른 것인지 함수형 컴포넌트와 클래스 컴포넌트 에 대해 알아보자!

기본 형식 비교

함수형 컴포넌트 예시

함수형 컴포넌트는 function 으로 시작한다. 그리고 return 내부에 적용하고 싶은 view를 넣어준다.

// 함수형 컴포넌트
function App() {
  const name = '리액트';

  return (
    <div>{name}</div>
  );
}

클래스형 컴포넌트 예시

클래스형 컴포넌트는 class로 시작한다. 그리고 넣고 render 함수에 적용하고 싶은 view를 넣어준다.

import './App.css';
import React, { Component } from 'react';

// 클래스형 컴포넌트
class App extends Component {
  render() {
    const name = '리액트';

    return (
      <div>{name}</div>
    );
  }
}

export default App;

함수형 컴포넌트와 클래스형 컴포넌트는 문법과 지원할 수 있는 기능이 조금 다를 뿐이지 역할은 똑같다.

각 컴포넌트의 장단점

클래스 컴포넌트의 이점

1. state 기능 및 라이프사이클 기능을 사용할 수 있다
2. 임의 메서드를 정의할 수 있다.

단, 클래스 컴포넌트를 사용하려면 render 함수가 꼭 정의되어 있어야 한다.

함수 컴포넌트의 이점

1. 선언하기가 편하다.
2. 메모리 자원도 덜 사용한다.
3. 결과물의 크기가 작아 배포시에 유리할 수 있다.

하지만, state 와 라이프사이클 API가 사용 불가하다. 이 점은 리액트 v16.8 업데이트 후 Hooks 라는 기능이 도입되면서 해결되었다.

Props 사용법

함수형 컴포넌트 예시

const MyComponent = props => {
  return (
    < div >
      안녕하세요, 제 이름은 {props.name} 입니다. <br />
      children 값은 {props.children} 입니다.
    </div >
  );
};

클래스형 컴포넌트 예시

class MyComponent extends Component {
  static defaultProps = {
    name: '기본 이름'
  };

  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  }

  render() {
    const { name, favoriteNumber, children } = this.props;

    return (
      < div >
        안녕하세요, 제 이름은 {name} 입니다. <br />
        children 값은 {children} 입니다. <br />
        제가 좋아하는 숫자는 {favoriteNumber} 입니다.
      </div >
    );
  }
}