728x90
참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby
1. 리액트 실행 과정을 바닐라 자바스크립트와 비교해보자
Vanilla Javascripts
<!DOCTYPE html>
<head>
<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 JS
<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>👉🏻먼저 React를 사용하기 전에 이 두 가지 스크립트를 넣어준다.
- 첫 번째: 우리가 만드는 어플리케이션의 UI가 interactive하게 만들어준다.
- 두 번째: React코드로 만든 html요소를 body tag에 들어갈 수 있게 해준다.
<!DOCTYPE html>
<head>
<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); //span을 root 안에 넣어주라
</script>
</html>👉🏻React 코드이다.
- id가 root인 HTML 요소를 가져온다.
- createElement로 span tag를 만든다.
- id를 sexy-span으로 글씨 색을 빨간색으로 설정한다.
- tag 내용은 'Hello, I'm a span'으로 설정한다.
- render를 통해 root 안에 span을 넣어준다.
비교
👉🏻Javascripts: HTML에서 요소를 만들고 JS로 그 요소를 불러와 속성을 수정한다.
👉🏻React: JS에서 HTML 요소를 만들고 속성을 설정해서 render한다.
✍🏻잘 보면 React는 JS의 과정과 반대라고 볼 수 있다. 이러한 점 덕분에 유저에게 보여줄 화면의 속성을 수정(업데이트)할 수 있다.
728x90
'그 땐 Front했지 > 그 땐 React했지' 카테고리의 다른 글
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 5. JSX (0) | 2022.05.15 |
|---|---|
| [노마드/React로 영화 웹 서비스 만들기] Ch02 THE BASICS OF REACT | 3. Events in React (0) | 2022.05.14 |
| [생활코딩/React] 2022개정판 | 10. delete (0) | 2022.05.06 |
| [생활코딩/React] 2022개정판 | 9. update (0) | 2022.05.06 |
| [생활코딩/React] 2022개정판 | 8. create (0) | 2022.05.05 |
