[React] Element와 Componet의 차이

🎈Element

• 앱의 UI를 구성하는 가장 단위
• immutable 객체(불변)
• 화면에 표시할 내용을 기술하는 단순한 객체이며, 실제 DOM 요소를 직접 만들지는 않는다.
• React.createElement() 함수로 생성되며, JSX를 사용하면 더 쉽게 작성 가능하다.

const element = <h1>Hello, React!</h1>;

• 아래 element는 화면에 <h1>Hello, React!</h1>를 표현하는 객체일 뿐, 아직 실제 DOM에 반영된 것은 아니다. 리액트는 이러한 엘리먼트를 ReactDOM.render() 혹은 useState, useEffect 등의 업데이트 과정에서 가상 DOM을 통해 실제 DOM으로 변환합니다.

 

🎈Component

• 리액트 엘리먼트를 반환하는 함수 또는 클래스
• 컴포넌트는 여러개의 엘리먼트들을 조합하여 재상용할 수 있도록 설계된다.
• JSX를 반환하는 함수형 컴포넌트(Function Component) 또는 React.Component를 상속받는 클래스형 컴포넌트(Class Component)로 만들 수 있다.
• 컴포넌트는 자체적인 상태(state)와 생명주기(lifecycle) 를 가질 수 있다(함수형 컴포넌트에서는 useState, useEffect 같은 훅을 사용).

function Welcome() {
  return <h1>Hello, React!</h1>;
}

• 위의 Welcome 컴포넌트는 <h1>Hello, React!</h1> 엘리먼트를 반환하는 함수형 컴포넌트이다.
• 컴포넌트를 사용할 때는 JSX에서 태그처럼 사용

// jsx 미사용 시
const element = React.createElement(Welcome);

// jsx 사용시
const element = <Welcome />;