React Class Component / Function Component

React 는 Class Component 와 Fucntion Component가 있다.

 

함수형 컴포넌트 ( function component ) 

import React from "react";

function Name({ first, last }) {
  return (
    <span>
      이름 : {first} {last}
    </span>
  );
}

export default Name;

 

클래스형 컴포넌트 ( class component ) 

import React, { Component } from "react";

class Name extends Component {
  render() {
  const {first, last} = this.props;
    return (
      <span>
        이름 : {first} {last}
      </span>
    );
  }
}
export default Name;

 

함수형, 클래스형 컴포넌트 차이점

• 클래스형 컴포넌트에는 render() {} 꼭 포함해야함
• 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 편하고 메모리를 클래스형 컴포넌트보다 적게 사용하는 장점이 있으나 state나 lifecycle을 사용할 수 없었다. 하지만 v16.8 업데이트 이후 리액트 훅 기능이 생기면서 해결되었다고 한다.
• 이것을 보고 굳이 나눠서 사용해하나?? 그냥 다 클래스 컴포넌트를 사용하면 될텐데 라고 생각했습니다만, 이외 함수형, 클래스형 컴포넌트 큰 차이점을 정말 잘 설명한 블로거 분이 계셔서 링크를 남기도록 하겠습니다.
• https://overreacted.io/ko/how-are-function-components-different-from-classes/