1. Vanilla JS VS React JS
버튼을 클릭하면 클릭한 횟수만큼 숫자가 올라가는 코드를 작성해보자.
① Vanilla JS
1) HTML 코드 만들기
2) Javascript에서 가져오기
3) event 감지하기
4) 데이터를 업데이트 한다.
5) HTML도 같이 업데이트 해준다.
<!DOCTYPE html>
<html lang="en">
<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
1. React JS는 어플리케이션이 아주 interactive 하도록 만들어주는 library이다. React JS는 엔진과 같아서, interactive 한 UI를 만들 수 있게 한다.
2. React DOM은 library, 또는 package 인데, 모든 React Element 들을 HTML body에 둘 수 있도록 해준다. React DOM은 React Element를 HTML에 두는 역할을 한다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://www.unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span", //HTML 태그(쿼리)
{ id: "sexy-span", style: {color: 'red'}}, //쿼리의 property (아이디, 스타일 등..)
"Hello I'm a span" //쿼리 안의 내용
);
ReactDOM.render(span, root);//render의 의미 : 사용자에게 보여준다.
</script>
</html>(실제로 React 개발자들은 이렇게 코딩하지는 않지만, 그래도 이 코드를 이해하면 앞으로 React JS를 사용하기에 더 편할 것이다.)
일단, 기존의 HTML 코드 상에서 React를 사용해주고 싶다면,
unpkg.com
에서 소스코드를 script에 복붙해와야 한다.
- React 소스코드 : https://www.unpkg.com/react@16.7.0/umd/react.production.min.js
- React DOM 소스코드 : https://www.unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js
기본적으로, React를 사용하려면 React DOM도 함께 사용해줘야 한다.
우선, ReactDOM.render();를 통해서 React를 사용할 수 있도록 해준다.
() 안에는 자식쿼리와 부모쿼리를 순차적으로 작성해준다.
그 다음에 html - body 쿼리 안에 root라는 아이디의 div 쿼리를 만들어준다.
그리고 하단의 자바스크립트 쿼리 안에 getElementById로 root 아이디 를 가져오고,
React.CreateElement를 통해서 div-root 쿼리 안에 span 쿼리를 만들어준다.
span 쿼리의 아이디와 스타일을 지정하고, 내용도 지정해준다.
이것을 우리는 html 코드에 직접 명시하지는 않았지만,
실제로 인터넷 창에서 마우스 우클릭 - 검사 버튼을 눌러서 Element 태그를 클릭해보면
이 태그가 생성이 된 것을 확인할 수 있다.
그리고 인터넷 화면에는 우리가 원하는 화면이 구성이 된 것을 확인 할 수 있다.
그렇다면, 만약에 root 쿼리 안에 2가지 쿼리를 한꺼번에 집어넣고 싶다면 어떻게 해야할까?
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://www.unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span", //HTML 태그(쿼리)
null,
"Hello I'm a span" //쿼리 안의 내용
);
const btn = React.createElement("button", null, "Click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);//render의 의미 : 사용자에게 보여준다.
</script>
</html>container라는 상수안에 React.createElement를 통해서 div 쿼리를 만들어주고,
그 안에 들어갈 내용에 array [ ] 를 통해서 span 쿼리와 btn 쿼리 2가지 쿼리가 동시에 들어가게끔 해준 뒤,
ReactDOM.render() 안에 자식쿼리에 container 상수를 넣어주면 된다.
그 다음 코드..!
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://www.unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const h3 = React.createElement(
"h3", //HTML 태그(쿼리)
{
onMouseEnter: () => console.log('mounse enter'),
},
"Hello I'm a span" //쿼리 안의 내용
);
const btn = React.createElement("button",
{
//button이 클릭될 때마다 호출될 function을 여기에 작성할 수 있다.
//이것이 바로 ReactJS의 강점이라고 할 수 있다.
onClick: () => console.log("I'm clicked"),
},
"Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);//render의 의미 : 사용자에게 보여준다.
</script>
</html>
이상으로 HTML에서 불편하게 React JS를 사용하는 방법에 대해서 알아보았고,
다음시간부터는 더이상 이렇게 코딩을 할 일은 없을 것이다.
(왜냐하면 npm을 통해서 직접 React를 설치해서 코딩을 할 것이므로..)
그럼 이만..!
'개발 > React' 카테고리의 다른 글
| 3.4 State Functions (0) | 2023.06.10 |
|---|---|
| 3.0 Understanding State (0) | 2023.06.09 |
| [복습] 2.5 JSX (0) | 2023.06.04 |
| 21.08.24 개발일지 (0) | 2023.05.24 |
| 21.08.23 오늘 개발 진행한 내용 (0) | 2023.05.24 |
