컴포넌트(Component)

컴포넌트는 UI를 구성하는 조각에 해당되며, 독립적으로 분리되어 재사용 목적으로 사용한다. React App에서는 컴포넌트은 각각의 JavaScript 파일로 분리되어 관리한다.

클래스 컴포넌트(Class Component)

React에서 클래스형 컴포넌트를 사용하려면 React.component를 상속 받아야 한다.
render()메서드는 클래스형 컴포넌트에서 반드시 적어야 하는 메서드 이다.

class Button extends Component {
  render() {
    const { type, chilren } = this.props
    return (
      <button type={type} className="button">
        {chilren}
      </button>
    )
  }
}

export default Button

함수형 컴포넌트(Function Componet)

함수형 컴포넌트은 클래스형 컴포넌트 처럼 this를 사용할 수 없다는 점 큰 차이점이다.

리액트에서 클래스형 컴포넌트와 함수형 컴포넌트는 유사하다. 하지만 함수형 컴포넌트에 없는 기능을 추가적으로 클래스형 컴포넌트에서 사용할 수 있다.

function Button(props) {
  return (
    <button type={props.type || 'button'} className="button">
      {props.children}
    </button>
  )
}

export default Button

Reference

컴포넌트 제대로 만들기 →(SITE)