Element와 Component

---

Element

React 애플리케이션에서 UI를 구성하는 가장 작은 단위

• 엘리먼트는 React가 UI를 표현하는데 사용하는 가상 DOM 요소를 나타낸다.
• React 엘리먼트는 실제 DOM 요소가 아니라, React에 의해 생성된 가상 DOM에 속하는 객체이다.
• 엘리먼트는 불변(immutable)하며, UI의 상태를 나타내기 위해 사용된다.
• JSX를 사용하여 작성되며, 다음과 같은 형태를 가지고 있다.

<div>Hello, World!</div>

Component

컴포넌트는 React 애플리케이션을 구성하는 독립적이고 재사용 가능한 코드 블록

• 컴포넌트는 UI를 나타내는 React 엘리먼트를 생성하고 반환하는 함수 또는 클래스이다.
• 클래스형 컴포넌트와 함수형 컴포넌트로 나뉠 수 있다.
• 컴포넌트는 엘리먼트의 집합이며, 더 복잡한 UI를 구성할 수 있도록 도와준다.
• 컴포넌트는 재사용 가능하므로, 유사한 기능을 하는 여러 부분에 쉽게 적용할 수 있다.

함수형 컴포넌트

함수형 컴포넌트는 JavaScript 함수로서, React.FunctionComponent 혹은 () => JSX 형태로 정의된다.

장점

• 코드가 간결하고 읽기 쉽다.
• 상태 관리나 생명 주기 메서드를 사용하지 않는 단순한 컴포넌트에 적합하다.
• React Hooks를 사용하여 상태 관리와 생명 주기 기능을 구현할 수 있다.

단점

• 상태(state)나 생명 주기(Lifecycle) 관리가 복잡할 경우 클래스형 컴포넌트보다 제한적이다.

import React from 'react';

const MyComponent = () => {
  return <h1>Hello, world!</h1>;
};

export default MyComponent;

클래스형 컴포넌트

클래스형 컴포넌트는 React.Component 클래스를 상속하여 정의된다. render() 메서드를 포함하며, JSX를 반환한다.

장점

• 상태(state)와 생명 주기(Lifecycle) 메서드를 편리하게 사용할 수 있다.
• React의 예전 버전부터 널리 사용되어 왔고, 많은 문서와 자료가 존재한다.

단점

• 클래스형 컴포넌트의 코드는 함수형 컴포넌트에 비해 조금 더 복잡하다.
• ES6 클래스 구문에 익숙하지 않은 개발자에게는 학습 곡선이 높을 수 있다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

export default MyComponent;

Element와 Component의 차이

// 엘리먼트
const element = <div>Hello, World!</div>;

// 함수형 컴포넌트
const MyComponent = () => {
  return <div>Hello, World!</div>;
};

// 클래스형 컴포넌트
class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
};