리액트 규모는 아래와 같이 찾아 볼 수 있다
ReactJS는 페이스북에서 만들었으며, ReactJS로 페이스북을 다시 만들었다.
ReactJS의 버전 업데이트에 투자가 될 것이고, 실제로 거대 기업들이 사용하고있다.
아래는 ReactJS 와 Vanilla JS 코드 비교이다
Product Level에서 쓰이진 않지만 비교는 해보면 좋을 것이다.
아래는 자바 스크립트
1. HTML 작성
2. Javascript에서 it 가져오기
3. button event 작성
4. 데이터(counter) 업데이트
5. HTML(span)을 업데이트
<!DOCTYPE html>
<html>
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick(){
counter = counter + 1;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick)
</script>
</html>
아래는 react
React JS의 규칙 중 하나는 HTML을 페이지에 직접 작성하지 않는 것이다.
react: 어플리케이션이 interactive하게 만들어주는 lirary
react-dom: library 또는 package로 볼 수 있고, React element들을 HTML body에 들어갈 수 있도록 해준다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
const root = document.getElementById("root");
// createElement function을 가진 React object에 접근
const span = React.createElement("span",
{ id:"sexy-spanm", style: { color: "red"} },
"Hello I'm a span");
// React element를 가지고 HTML로 만들어 배치한다는 것
ReactDOM.createRoot(root).render(span);
</script>
</html>
'Develop Dairy > JavaScript, React' 카테고리의 다른 글
| JS와 Webassembly의 차이점 (2021. 10. 23) (0) | 2021.10.23 |
|---|---|
| JS Variables let, const, var & Data Types (0) | 2020.12.31 |
| Vanilla JS, 바닐라 자바스크립트 로 시작하는 이유 (0) | 2020.12.31 |
| ES ? ECMAScript (0) | 2020.12.31 |
| 페이스북인증하기위한 app ID와 app시크릿코드보기 (0) | 2019.04.04 |