React 컴포넌트란?

⚡컴포넌트 (Component)란?

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다.
쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다.
리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. 

• 컴포넌트 구성 요소 
1) property(props) 

• 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다. 
  2) state
• 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다. 
  3) context 
• 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터입니다. 

📌함수(Function) 컴포넌트

자바스크립트의 "함수(function)" 기반 컴포넌트입니다. 자바스크립트 함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환합니다.

function MyComponent() {
  return (
    <div>
      Hello React!
    </div>
  );
}

또는 화살표 문법으로도 나타낼 수 있다.

const MyComponent = () => {
    return (
        <div>
            Hello React!
        </div>
    );
};

📌클래스(Class) 컴포넌트

클래스 컴포넌트는  자바스크립트의 "클래스" 기반 컴포넌트로, class로 정의하고 render() 함수에서 jsx 코드를 반환합니다. 

• 클래스 컴포넌트 특징 
1) class 키워드로 클래스 컴포넌트 생성2) React.Component 상속
React의 ComponentClass를 상속받아  Component 상속이 필요해요. 
3) render () 메서드 필수로 사용  
클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX 를 리턴합니다. 
4) this 키워드 사용하기 
state, props, refs,컴포넌트 메서드, 생명주기 메서드를 사용할 때 this 로 프로퍼티를 참조하여 사용합니다. 

• 클래스 컴포넌트 생성하기 
클래스 컴포넌트는 React의 ComponentClass를 상속받아 구현되기 때문에 반드시 {Component}를 import 하고 React.Component 를 상속받아야합니다. 

import React, { Component } from 'react';

Component 를 상속받고, render() 메서드를 통해 return 문 안에 있는 JSX 코드를 반환합니다. 

class MyComponent2 extends Component {
    render() {
        return (
            <div>
                Hello React!
            </div>
        );
    }
}