# React 앱 (웹 환경)

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

![Virtual DOM → Render to DOM (bit.ly/3beABPb)](https://miro.medium.com/max/2000/1*BAleNGsko42ArMZKbsjPRA.gif)

## React API

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

{% tabs %}
{% tab title="개발 버전" %}

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

{% endtab %}

{% tab title="배포 버전" %}

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

{% endtab %}
{% endtabs %}

실습에 사용할 React API는 [createElement()](https://reactjs.org/docs/react-api.html#createelement) 입니다. 작성 방법은 다음과 같습니다.

{% tabs %}
{% tab title="React API" %}

```jsx
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,
  }
})
```

{% endtab %}
{% endtabs %}

#### CSS 스타일

{% embed url="<https://gist.github.com/yamoo9/4b611e0b27f6f73d64875863c334b764>" %}

## ReactDOM API

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

{% tabs %}
{% tab title="개발 버전" %}

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

{% endtab %}

{% tab title="배포 버전" %}

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

{% endtab %}
{% endtabs %}

실습에 사용할 ReactDOM API는 [render()](https://reactjs.org/docs/react-dom.html#render) 입니다. 작성 방법은 다음과 같습니다.

{% tabs %}
{% tab title="ReactDOM API" %}

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

{% endtab %}
{% endtabs %}

#### 라이브 예제

{% embed url="<https://codesandbox.io/s/react-react-dom-api-web-05n2m?file=/src/index.js>" %}