프로젝트를 본격적으로 하기 전, ReactJS 복습이 필요하다고 생각해 다시 듣기로 결정 !
이번에는 제발 끝까지 블로그 쓰기를 바란다...
~2.2까지의 강의
처음에는 바닐라랑 비교를 한다.
vanilla
<!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>간단한 과정은 이렇다.
html을 작성 -> 자바스크립트에서 버튼을 가져옴 ->
클릭이벤트 감지(addEventListener) -> 이벤트 함수에서 이벤트를 업데이트 -> html 업데이트
React
<!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>
const root=document.getElementById("root");
const span = React.createElement(
"span",
{id:"sexy-span",
style: {color:"red"}},
"Hello, I'm a span"
);
ReactDOM.render(span,root);
</script>
</html>React 이기는 하지만, 먼저 스크립트로 불러와서 한다.
여기서 react~는 엔진역할이고 UI를 만들고, react-dom~은 html 바디에 넣어주는 역할이라고 한다.
ReactDom.render()에서 render는 React element를 가지고 HTML로 만들어 배치한다는 뜻이다.
즉, 사용자에게 보여준다는 의미이다.
ReactDom.render(span, span이 갈 위치)
-> 그래서 보통 body에 id를 넣어 span을 root 안에 넣으려고 한다.
React는 JS에서 시작한 후에, HTML로 간다.
즉, React 업데이트가 필요한 element를 업데이트 할 것이라는 말인데, 이것은 결과물인 html을 업데이트 한다는 말이다.
*react-spring: The "interpolate" function is deprecated in v9 (use "to" instead)
실행은 잘 되지만, 이런 메시지가 뜨는데 왜이러는 건지 모르겠음
정리
바닐라JS는 HTML-> JS
리액트JS는 JS->HTML
전과 마찬가지로 노카드 코더 강의 참조
https://nomadcoders.co/react-for-beginners
'Web Service > React' 카테고리의 다른 글
| [영화 웹 서비스 만들기] #3. JSX (0) | 2022.03.14 |
|---|---|
| [영화 웹 서비스 만들기] #2. 바닐라JS와 리액트JS의 비교2, 버튼 (0) | 2022.03.14 |
| [nextjs-blog] #3. Pre-rendering and Data Fetching (0) | 2022.01.11 |
| [nextjs-blog] #2. Assets, Metadata, and CSS (0) | 2022.01.10 |
| [nextjs-blog] #1. Navigation (0) | 2022.01.08 |
댓글