[React] React, ReactDOM 라이브러리

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

이것저것 다 개발

[React] React, ReactDOM 라이브러리 본문

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>