[면접질문 #4] What is difference between Element and Component? - Element와 Component의 차이점이 무엇인가?

아래 글은 https://github.com/sudheerj/reactjs-interview-questions 에서 번역한 내용이며, Sudheer Jonna 로 부터 번역 허락을 받았음을 알립니다.

 

이 글을 읽고, 면접 뿐만 아니라 자바스크립트의 기본 및 심화 개념을 잡는데 도움이 되었으면 좋겠습니다. 영어 전공자가 아니므로, 오역 또는 제 나름대로의 직역이 있습니다.

---

Element는 DOM의 관점에서 우리가 화면에 나타내고 싶은 plain object 이다. Element는 다른 Element를 그들의 props로 포함할 수 있다. React의 element를 만드는 것은 가벼운 작업이다. Element가 한번 생성되면 다시는 변형되지 않는다.

 

React Element는 다음과 같이 표현할 수 있다.

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

 

위의 React.createElement() 함수는 Object를 반환한다.

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

 

그리고 마지막으로 이 Obejct는 ReactDOM.render() 를 이용하여 DOM에 렌더링 된다.

<div id='login-btn'>Login</div>

 

반면에, Component는 몇가지 다른 방법으로 선언할 수 있다. 이것은 render() 메소드를 포함한 class가 될 수 있다. 아니면, 간단한 케이스로, 함수가 될 수도 있따. 두 가지 경우 모두, props를 input으로 전달 받고, JSX를 output으로 반환한다.

const Button = ({ onLogin }) => <div id={'login-btn'} onClick={onLogin}> Login </div>

 

그리고 JSX를 React.createElement() 함수 트리로 변환된다.

const Button = ({ onLogin }) => React.createElement(
  'div',
  {
    id: 'login-btn',
    onClick: onLogin
  },
  'Login'
)