컴포넌트

이번 포스팅에서는 함수형 컴포넌트와 클래스형 컴포넌트의 차이점을 알아보도록 하겠습니다.
우선 React를 사용하여 개발을 할 때 클래스형, 함수형 두 가지 방법으로 컴포넌트를 선언할 수 있습니다.
예전에는 클래스형 컴포넌트가 많이 사용되었지만 React 16.8v 부터 hook을 지원하였고 현재 React의 공식 문서에서도 함수형 컴포넌트와 훅을 함께 사용하는 방법을 권장하고 있습니다.

함수형 컴포넌트

함수형 컴포넌트의 선언은 두 가지가 있습니다
가장 기본적인 함수형 컴포넌트의 선언은 다음과 같습니다.

import React from 'react';

function App() {
  const title = '함수형 컴포넌트';
  return <div>{title}</div>;
}

export default App;

또 다른 방법으로는 ES6 문법에서 함수를 표현하는 방식으로 화살표 함수를 사용하는 방법이 있습니다.

import React from 'react';

const App = () => {
  const title = '함수형 컴포넌트';
  return <div>{title}</div>;
}

export default App;

클래스형 컴포넌트

클래스형 컴포넌트의 선언 방식은 다음과 같습니다.

import React, { Component } from 'react';

class Hello extends React.Component {
  render() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
}

export default Hello;

차이점

클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일합니다. 다만 클래스형 컴포넌트는 state기능 및 라이플 사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있습니다 그리고 render 함수가 필수로 존재해야 합니다.
반면 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하게 선언을할 수 있고 메모리 자원을 덜 사용하는 장점이 있습니다.
그러나 위에 언급한 클래스형 컴포넌트에서 state, 라이프사이클 기능을 사용할 수 없지만 리액트 hook이 도입되면서 이러한 단점들은 해결이 되었습니다.

• 참고

  https://devowen.com/298