노마드코더 react 기초 1일차
바닐라 js와 react js를 비교하는 수업을 진행하였다.
이를 통해 리액트의 편리함을 알 수 있었다.
vanila.html
react.html
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root=document.getElementById("root");
function Title () {
return(
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello i'm title
</h3>
);
}
const Button = () => (
<button
style={{
backgroundColor : "tomato",
}}
onClick={()=>console.log("im Clicked")}>
"Click me"
</button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>이렇게만 보면 vanila.js가 훨씬 간단해보이지만 코드가 길어지게 될경우 더욱 깔끔하고 간결하게 사용가능하다.
리액트 사용시
1. ReactDom과 React를 선언해주어야한다.
ReactDOM 이란?
👉 React element를 가져다 html로 바꿔주는 역할을 함.
- render
ReactDOM.render(span, root);
reactDOM을 이용해 render한다 render 함수가 호출되면<div id="root"></div>이 부분에 컴포넌트가 연결되어 내가 작성한 span 컴포넌트를 삽입해준다.
예를 들면<div id="root"><span>hello</span></div>이런식으로 연결이 된다.
index.js 파일
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
React는 순수 자바스크립트를 말한다 이를 이용해 컴포넌트를 만들어나간다.
위의 코드는 바벨을 이용해 순수 자바스크립트로 변환된다.
그리고 우리가 만든 컴포넌트를 html과 연결해줘야한다!! 이것을 도와주는것이 reactDOM이다!
reactDOM을 통해 html과 연결되어 html문서를 배포할 수 있게된다.
