React.js의 아주 기초적인 사용법
React를 공부하기 시작했습니다. 아주 간단한 것부터 알게 된 것을 기록해 볼까 합니다. React는 프레임워크라기보다는 라이브러리라고 할 수 있습니다. 그렇기 때문에 기존의 HTML에 간단하게 React를 적용할 수 있습니다.
먼저 가장 기본적인 HTML은 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>그냥 HTML 기본 구성</title>
</head>
<body>
<div></div>
</body>
</html>
React.js 적용하기
react.js를 적용하기 위해서 먼저 react.js javascript CDN을 적용해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React CDN 추가</title>
<!-- CDN 추가 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
</head>
<body>
<div></div>
</body>
</html>
이제 이 HTML 문서는 React를 실행시킬 수 있습니다. 간단하죠? 한번 간단하게 적용해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React CDN 추가</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
</head>
<body>
<!-- react가 나타날 위치 -->
<div id="root"></div>
<script type="text/javascript">
// react가 나타날 위치에 h1 태그를 생성
ReactDOM.render(React.createElement("h1", { style: { color: "blue" } }, "안녕하세요."), document.getElementById("root"));
</script>
</body>
</html>
먼저 react가 발현될 dev를 지정합니다. 보통은 id="root"를 많이 사용하나 바꾸어도 상관없습니다.
그리고 react 문을 작성합니다. react도 javascript이므로 javascript 형식으로 작성합니다.
<script type="text/javascript">
ReactDOM.render(React.createElement("h1", { style: { color: "blue" } }, "안녕하세요."), document.getElementById("root"));
</script>
위의 구성은 React의 라이브러리를 사용한 것입니다.
ReactDOM.render(A, B);: A를 B에 표시해라라는 의미입니다.React.createElement(A, B, C): A Tag를 B의 속성으로 C의 내용을 넣어서 DOM을 만들라는 의미입니다.
그래서 위와 같이 적용을 하면 id="root" 위치에 <h1 style="color:blue" >안녕하세요.</h1>이 만들어집니다.
적용하는 것은 간단하죠?
다음 포스팅은 JSX를 적용하는 방법을 작성해 보려고 합니다.
Comments