React js의 요소 대 구성 요소

요소는 DOM 노드 또는 기타 구성 요소와 관련하여 화면에 표시하려는 항목을 설명하는 일반 개체입니다. 요소는 소품에 다른 요소를 포함할 수 있습니다. React 요소를 만드는 것은 저렴합니다. 요소가 생성되면 절대 변경되지 않습니다.

React Element의 객체 표현.

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

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

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

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

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

반면 구성 요소는 여러 가지 방법으로 선언할 수 있습니다. render() 메서드가 있는 클래스이거나 함수로 정의될 수 있습니다. 두 경우 모두 소품을 입력으로 사용하고 JSX 트리를 출력으로 반환합니다.

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'
)

반응 요소

React Element는 DOM 노드의 객체 표현입니다. 이것은 실제 DOM 요소가 아니라 평범한 오래된 객체입니다.

{
  type: 'h2',
  props: {
    className: 'heading heading-medium',
    children: 'React Deep Dive'
  }
}

const header = (
  <h2 className="heading heading-medium">
    React Deep Dive
  </h2>
)

요소에는 유형, 소품 및 내부에 중첩된 모든 자식이 있습니다. 유형은 DOM 요소(위의 예에서 'h2'와 같은)이거나 구성 요소 요소(아래에서 설명하는 제목과 같은)일 수 있습니다.

반응 구성 요소
React Component는 React Elements로 구성됩니다. 렌더링 기능이 있는 클래스이거나 상태 비저장 기능 구성 요소입니다. props를 입력으로 받고 요소 트리를 출력으로 반환합니다. 구성요소 이름은 대문자로 시작합니다(Heading vs h2).

const Heading = (props) => {
  return (
   <h2 
    className={`heading heading-${props.size}`}
   >
    {props.children}
   </h2>
  )
}