리액트 컴포넌트와 리액트 엘리먼트의 차이점

1. 리액트 컴포넌트

리액트 컴포넌트는 UI를 구성하기 위한 블록이며, 화면에 렌더링할 내용을 정의하는 함수 또는 클래스이다.

🌟 정의

• 컴포넌트는 리액트가 특정한 방식으로 처리할 수 있는 JavaScript 함수나 클래스이다.
• 컴포넌트는 JSX를 반환하며, 그 자체로는 실행되지 않는다. 렌더링 시 엘리먼트로 변환된다.
• 재사용 가능한 UI의 단위로 사용된다.

🌟 종류

• 함수형 컴포넌트: React Hook을 사용할 수 있는 함수 형태의 컴포넌트

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

• 클래스형 컴포넌트: React.Component를 상속받아 정의된 컴포넌트 (현재는 잘 사용되지 않음)

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

🌟 호출

• 컴포넌트는 JSX를 사용해 호출되며, 리액트는 이를 처리해 엘리먼트를 생성한다.
• 호출된 컴포넌트난 렌더링할 내용을 정의하고 반환한다.

🌟 입력값

• 컴포넌트는 props(속성)를 받아 렌더링 내용을 동적으로 결정할 수 있다.

  function MyComponent({ message }: {message: string}) {
    return <div>{message}</div>;
  }
  
  <MyComponent message="Hello, world!" />

---

2. 리액트 엘리먼트

리액트 엘리먼트는 화면에 렌더링될 UI를 React가 설명하는 객체이다.

🌟 정의

• 리액트 엘리먼트는 React의 가상 DOM을 구성하는 객체이다.
• 리액트 컴포넌트를 호출하거나 JSX를 사용하면 엘리먼트가 생성된다.
• 화면에 나타날 UI의 구조, 속성, 내용을 설명하는 불변 객체(immutable object)이다.

🌟 생성

컴포넌트를 JSX로 호출하거나 React의 React.createElement API를 사용하면 엘리먼트가 생성된다.

const element = <div>Hello, world!</div>;

이 코드는 React 내부적으로 다음과 같은 객체로 변환된다.

const element = React.createElement('div', null, 'Hello, world!');

🌟 특징

• 엘리먼트는 화면에 표시될 내용의 스냅샷으로, 불변 객체이다.
• 변경 사항이 있을 경우 React는 새로운 엘리먼트를 생성하고, 이전 엘리먼트와 비교(diffing)하여 필요한 부분만 실제 DOM에 반영한다.

---

3. 주요 차이점

	컴포넌트	엘리먼트
정의	UI를 반환하는 함수 또는 클래스	컴포넌트나 JSX를 통해 생성된 React 객체
용도	UI를 정의하고 재사용 가능한 구조 제공	React가 렌더링할 구체적인 내용을 설명
생성 시점	코드 작성 시 직접 정의	컴포넌트를 호출하거나 JSX를 사용할 때 생성
형태	함수, 클래스	React의 불변 객체
상태 관리	state, props를 통해 동적인 상태 관리 가능	정적이며, 상태 관리 불가
예제	function MyComponent() {}	<MyComponent />, <div>Text</div>
변경 가능성	내부 상태에 따라 동적으로 변경 가능	한 번 생성되면 변경 불가능

---

4. 흐름 요약

(1) 컴포넌트를 정의

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

(2) 컴포넌트를 호출하여 JSX로 작성

const element = <MyComponent />;

(3) 리액트 엘리먼트 생성

• 리액트는 내부적으로 React.createElement를 호출해 엘리먼트를 생성한다.
• 엘리먼트는 다음과 같이 생긴 객체이다.

  {
    "type": "div",
    "props": {
      "children": "Hello, world!"
    }
  }

(4) 렌더링
리액트는 생성된 엘리먼트를 기반으로 가상 DOM을 업데이트하고, 실제 DOM에 반영한다.

---

5. 예제

function App() {
  return (
    <>
      <MainPage />
    </>
  );
}

• <MainPage />는 엘리먼트이다.
  • JSX를 사용하면 컴포넌트(MainPage)가 호출되고, 리액트 엘리먼트가 생성된다.
  • 이 엘리먼트는 React가 화면에 렌더링할 내용을 결정하는 데 사용된다.

• MainPage는 컴포넌트이다.
  • MainPage 자체는 함수(또는 클래스)로 정의된 컴포넌트이다.
  • React는 이를 호출하여 엘리먼트를 생성한다.

---

6. 결론

• 컴포넌트는 화면에 렌더링될 UI를 정의하는 설계도(함수 또는 클래스)이다.
• 엘리먼트는 컴포넌트를 호출하거나 JSX로 작성하여 생성된 실제 렌더링 가능한 객체이다.
• 컴포넌트는 설계, 엘리먼트는 실행 결과라고 이해하면 된다.