요소(Element)와 구성요소(Component)의 차이점은 무엇입니까?

1. Element (React Element)

*Element는 Component를 이루는 작은 단위로, DOM 노드나 다른 컴포넌트와 관련하여 화면에 나타내고자 하는 내용을 설명하는 일반 객체입니다.*

즉, Element는 컴포넌트 인스턴스나 DOM 노드에 관한 정보를 담고있는 모델 객체 입니다.

• 컴포넌트 호출 시 return 하는 것 (JSX → babel을 통해 react.createElement() 호출)
• Element는 다른 Element를 props 내에 포함할 수 있습니다.
• React Element를 생성하는 것은 비용이 적게듭니다.
• 생성된 Element는 한 번 생성되면 변경되지 않습니다.
• type, key, props, ref 등의 정보를 담고 있습니다.

React Element의 객체 표현은 다음과 같습니다 :

const element = React.createElement('div', { id: 'login-btn' }, 'Login');

위의 React.createElement() 함수는 객체를 반환합니다 :

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

마지막으로 ReactDOM.render()를 사용하여 DOM으로 렌더링합니다.