컴포넌트(Component)가 머여?

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

컴포넌트 구성 요소

1. Property(Props)

• 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터. 프로퍼티 값은 자식 컴포넌트에서 수정할 수 없다.

2. State

• 컴포넌트의 상태를 저장하고 수정 가능한 데이터.

3. Context

• 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터.

---

함수(Function) 컴포넌트

함수형 컴포넌트는 말 그대로 자바스크립트의 함수(function)기반 컴포넌트이다. 자바스크립트 함수를 선언하듯이 function으로 컴포넌트를 정의하고, return문에 JSX 코드를 반환한다.

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

// 화살표 문법으로 나타내기
const MyComponet = () => {
  return (
    <div>
      Hello React!
    </div>
  );
}

함수 컴포넌트를 사용하는 이유

1. Hooks
과거에는 함수형 컴포넌트가 state, 라이프사이클을 지원하지 않아 클래스형 컴포넌트를 주로 사용했지만, React v16이후부터 Hooks를 통한 state 및 LifeCycle관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장. Hook의 useState를 사용해 state를 관리할 수 있고, useEffect를 사용해 LifeCycle을 관리할 수 있다.
2. 직관적 코드
자바스크립트의 함수 선언, 화사료 함수를 그대로 사용해 컴포넌트를 사용하기 때문에 개발자에게 직관적이다.
3. 메모리 자원 효율
클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용한다.

---

클래스(Class) 컴포넌트

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

클래스 컴포넌트 특징

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

// 클래스형 컴포넌트의 코드 구조
class MyComponent2 extends Component {
    render() {
        return (
            <div>
                Hello React!
            </div>
        );
    }
}

참고 : https://life-with-coding.tistory.com/508