React Component와 React Element 차이

리액트의 정체성인 컴포넌트와 한번쯤은 들어봤을 엘리먼트!

이 둘의 차이가 정확히 뭔지 모른채 그게 그거지 했었다

 

리액트 컴포넌트(React Component)

UI의 한 부분을 캡슐화하여 재사용 가능한 코드 블록, 즉 함수다

리액트 컴포넌트가 반환하는 것이 리액트 엘리먼트이다

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

 

리액트 엘리먼트(React Element)

컴포넌트의 인스턴스로, 직관적으로는 JSX에서 html 태그로 된 객체이고,

내부적으로는 화면에 표시할 내용을 기술한 Virtual DOM에서 사용하는 객체이다

 

즉, 컴포넌트가 렌더링하는 모든 UI 정보를 가진 객체이다

 

그리고 React DOM는 엘리먼트들을 모아 Virtual DOM을 만들고, 업데이트 전 Virtual DOM과 비교하여 변경되는 엘리먼트만 DOM을 업데이트한다

const element = <MyComponent />;

@Sung Archive

결론

리액트 컴포넌트 = 엘리먼트를 반환하는 함수

리액트 엘리먼트 = JSX에서 html 태그로 된 객체 (UI 정보를 갖고 있는 객체)

function MyComponent() {
  return <div>Hello, World!</div>;
}
const a = MyComponent; // React Component
const b = MyComponent(); // React Element