React - 리액트 요소란?

이전글:  2019/02/22 - [IT/React] - React - 컴포넌트란?

컴포넌트를 생성하고 관리하기 위해서는 리액트의 render 메서드를 호출해서 렌더링 해야 한다.

ReactDom.render(
  ReactElement element,
  DOMElement container,
  [function callback]
) -> ReactComponent

위에서 보듯이 컴포넌트를 개발하기 위해서는 컴포넌트를 구성하는 기본 단위인 ReactElement에 대해서 먼저 알아봐야 한다. 

ReactElement (리액트 요소란?)

 - 리액트 요소는 리액트에서 컴포넌트를 구성하기 위한 기본 단위다. 

 - 리액트 요소는 문자열을 이용해(div, a, p 등) DOM 요소를 생성한다. 

 - props 객체를 이용해 리액트 요소를 설정할 수 있다. 

 - 중첩 표현 가능하여 한 요소를 자식 요소로 지정할 수 있다. 

 - 리액트는 리액트 요소를 이용해 가상 DOM을 구성하며 React-dom 라이브러리는 가상 DOM을 이용해 브라우저 DOM을 갱신한다. 

 - ReactComponentElement: 리액트 컴포넌트를 표현하는 함수나 클래스에 대한 참조 

 - ReactDOMEelemnt: DOM요소를 가상으로 표현한 객체

   

 - 위 그림에서 보듯이 가상DOM은 실제DOM과 유사한 트리 형식의 구조를 사용한다. 

   Real DOM은 DOMElements로 구성되는 반면, 리액트의 Virtual DOM은 리액트 요소들로 구성된다.

 - React 의 Element는 어떻게 생성할까? 실제 코드를 보자. 

import React, { Component } from 'react';
import { render } 'react-dom';

const app = document.getElementById('app');
const root = React.createElement('div', {}, 

React.createElement('h1', {}, "Hello world",  // {} 가 props
      React.createElement('a', {href: 'mailto:kimyhcj@gmail.com'}, 
            React.createElement('h1', {}, "React In Action"), 
            React.createElement('em', {}, "... and now it really is")
       )
  )
);
render(root, app);

      

실제 코드를 보니.... 컴포넌트가 중첩 될수록 코드를 읽기가 상당히 어려워진다. 

React 소개에서 언급했던 JSX 문법을 이용하면 매우 쉬워진다.

다음글: 2019/02/23 - [IT/React] - React - 리액트 클래스 (상태가 있는 컴포넌트)