1. Element

실제로 화면에 렌더링 할 DOM 노드들의 정보를 React에게 알려주기 위한 수단입니다.

DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당합니다.

type(문자열 혹은 컴포넌트 함수 / 클래스) 필드와 props(객체) 필드를 가지는 React의 객체 입니다.

일반적으로 JavaScript의 React.createElement() 함수 또는 JSX의 태그 문법(ex. <Button / >)으로 작성합니다.

엘리먼트들로 이루어진 트리를 엘리먼트 트리라고 부르며, 이는 메모리 상에만 존재하는 가상 DOM 입니다.

2. DOM Element

엘리먼트의 type이 태그 이름에 해당하는 문자열인 경우(소문자로 시작)를 말합니다.

해당 태그를 가진 DOM 노드를 표현하며, props 정보를 통해 해당 노드의 어트리뷰트들을 표현합니다.

React가 실제로 화면에 렌더링 하는 대상에 해당됩니다.

<div className = "user_info"> </div>

3. Component Element

엘리먼트의 type이 컴포넌트 클래스/함수인 경우(대문자로 시작)를 말합니다.

사용자가 직접 정의한 컴포넌트를 표현하며, 입력으로 props를 받으면 렌더링 할 엘리먼트 트리를 반환합니다. 이 엘리먼트 트리는 다시 DOM 엘리먼트나 컴포넌트 엘리먼트들로 이루어집니다.

<Password value="1234" />

• 클래스형 컴포넌트 : 지역 상태를 가질 수 있고, 해당 컴포넌트 인스턴스에 대응하는 DOM 노드가 생성, 수정, 삭제될 때의 동작을 제어할 수 있습니다.(생명 주기)
• 함수형 컴포넌트 : render() 함수만 가지는 클래스형 컴포넌트와 동일하며, 지역 상태를 가질 수 없지만 구현이 단순합니다.

// 클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className='react'>{name}</div>;
  }
}

export default App;

// 함수형 컴포넌트

import React from 'react';

function App() {
  const name = '리액트';
  return <div className='react'>{name}</div>;
}

export default App;

컴포넌트에 대한 더 자세한 내용은 [React] 컴포넌트 에서 볼 수 있습니다.

• React를 공부하는 중이고, 복습하는 겸 포스팅을 하고 있기 때문에, 틀린 정보가 있을 수 있습니다.
  잘못된 정보가 있다면 댓글로 알려주세요 :)