React 앱 (웹 환경)

웹 브라우저 환경에서 React API를 사용해 "Virtual DOM Tree"를 구성한 후, React DOM API를 통해 브라우저 화면에 렌더링 하는 간단한 실습을 진행합니다.

Virtual DOM → Render to DOM (bit.ly/3beABPb)

React API

웹 브라우저 환경에서 React를 사용하기 위해 React 라이브러리를 호출합니다.

개발 버전

<script src="//unpkg.com/react/umd/react.development.js"></script>

배포 버전

<script src="//unpkg.com/react/umd/react.production.min.js"></script>

실습에 사용할 React API는 createElement() 입니다. 작성 방법은 다음과 같습니다.

React API

const buttonElement = React.createElement(
  // 생성 할 React 요소 이름 (String | ReactComponent | ReactFragment)
  'button', 
  // 전달 속성 객체 (Object)
  {
    type: 'button',
    className: 'button button__upload button--idle'
    onClick() {
      console.log('업로드 중...')
    },
  },
  // 자식 노드 (children)
  '업로드',
  iconElement
)

const iconElement = React.createElement({
  'img',
  {
    src: './src/assets/icons/up-arrow.svg',
    alt: ''
    height: 12,
  }
})

CSS 스타일

ReactDOM API

웹 브라우저 환경에서 ReactDOM을 사용하기 위해 ReactDOM 라이브러리를 호출합니다.

개발 버전

<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>

배포 버전

<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>

실습에 사용할 ReactDOM API는 render() 입니다. 작성 방법은 다음과 같습니다.

ReactDOM API

ReactDOM.render(
  // React 요소 (가상 노드 트리)
  buttonElement,
  // 실제 DOM 요소 노드
  document.getElementById('root')
)

라이브 예제