React

[React] React, ReactDOM 라이브러리

용용개발 2018. 6. 17. 23:46

React와 ReactDOM


React를 사용하기 위해서는 먼저 React와 ReactDOM이라는 라이브러리가 필요합니다.

React는 View를 만들기위한 라이브러리이고, 

ReactDOM은 UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리 입니다.


CDN으로 React와 ReactDOM 라이브러리를 추가하겠습니다.

https://reactjs.org/docs/cdn-links.html << React CDN Links

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>


React로 가장 간단한 예제를 만들기 위해 간단한 html 파일을 하나 만들겠습니다.

react_example_01.html

<!DOCUMENT html>
<html>
<head>
<meta charset="utf-8">
<title>React01</title>
</head>
<body>
	<div id="root"></div>        //여기에 react Element 추가
	<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
	<script type="text/javascript">
	// 여기에 react 코드 작성
	</script>
</body>
</html>

위처럼 간단한 html 코드를 작성하고 react와 reactDOM의 라이브러리를 추가하였습니다.

그리고 그 아래 script 태그가 react 코드를 작성할 공간입니다.


react 코드를 작성해보겠습니다.

<script type="text/javascript">
	// react element를 추가할 root div
	const root = document.getElementById('root')
	
	//React.createElement 를 사용하여 div element 생성
	const element = React.createElement("div",
		null,
		"Hello World"
	)

	//element를 root에 렌더링
	ReactDOM.render(element, root)
</script>

React는 렌더링 과정에서 React.createElement로 만든 react element를 실제 DOM element로 변환하게 됩니다.

이처럼 React는 브라우저 DOM을 쉽게 갱신할 수 있습니다.


다음글에서는 Babel과 JSX를 사용한 코드를 작성해 보겠습니다.

http://yongyi1587.tistory.com/38    <    Babel과 JSX