웹 브라우저 환경에서 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() 입니다. 작성 방법은 다음과 같습니다.
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.render(
// React 요소 (가상 노드 트리)
buttonElement,
// 실제 DOM 요소 노드
document.getElementById('root')
)
라이브 예제
