특별한 일상

[REACT] 모던스크립트 리액트 hello world(react basic in modern script) 본문

IT•개발 끄적/React

[REACT] 모던스크립트 리액트 hello world(react basic in modern script)

소다맛사탕 2021. 5. 11. 20:03
반응형

안녕하세요. 소다맛사탕 입니다.

이번 포스팅은 일반적인 HTML과 DOM 환경에서 리액트를 사용하는 방법에 대해 알아 보겠습니다.

 

리액트의 기본적인 사용법

기본적으로 HTML, DOM 환경에서 jQuery를 사용하는 CDN을 설정하는 것과 같이

리액트 라이브러리를 읽어 들이는 스크립트 즉, CDN을 선언해야 합니다.

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

앞의 두 줄은 리액트 라이브러리,

마지막 줄은 자바스크립트 문법 구문을 확장한 것입니다.

말 그대로 기본적으로 HTML에서 javaScript를 선언하게 되면

<script type="text/javascript"></script> 라는 형식으로 시작을 하는데

 

리액트 구문을 실행시키기 위해서는

<script type="text/babel"></script> 를 선언해 JSX를 활성해야 합니다.

JSX 란? 자바스크립트 안에서 HTML 문법을 사용해 VIEW를 구성할 수 있게 도와주는 자바스크립트 문법.

간단하게 모든 프로그래밍의 초석이 되는 가장 기본적인 hello world를 뽑는 예시로 마무리 하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="div01"></div>
<!-- 
	HTML안에 리액트 문법을 쓸 수 있게
  	스크립트 정의 
-->
<script type="text/babel">
	ReactDOM.render(
		<h1>HELLO~~ WORLD!</h1>,
		document.getElementById('div01')
	)
</script>
</body>
</html>

리액트에서 DOM을 출력할 때는 ReactDom.render() 메서드를 사용합니다.

기본적인 $(document).ready(function(){}); 과 비슷한 느낌...

 

HTML 파일을 웹 브라우저에 drap and drop하여 실행하면...

 

리액트 hello world

다음과 같은 결과가 출력됩니다.

 

앞으로 리액트에 관련된 소스나 공부를 위해 차근차근 포스팅을 올려 보겠습니다.

저작자표시

'IT•개발 끄적 > React' 카테고리의 다른 글

[REACT] 리액트 컴포넌트로 체크박스 선택/해제 구현(used React component in checkbox)  (0) 2021.06.04
[REACT] 리액트 JSX로 스타일 지정 (React JSX in CSS)  (0) 2021.05.21
[REACT] 리액트 JSX 태그 내부에 변수 넣기(React JSX in InnerTag)  (0) 2021.05.13
'IT•개발 끄적/React' Related Articles more
Comments