기존의 바닐라 자바스크립트의 경우
아래와 같은 방식으로 클릭시 숫자가 올라가게끔 할 수 있었다
<!DOCTYPE html>
<html>
<body>
<p>Total click: <span id="count">0</span> </p>
<button id="btn">Click me</button>
</body>
<script>
const button = document.querySelector("#btn");
let count = document.querySelector("#count");
function handleClick() {
count.innerText = ++count.innerText;
}
button.addEventListener("click", handleClick);
</script>
</html>
React를 사용하기 위해서는 react를 설치해야 한다.
script cdn을 추가한다.
React와 react-dom을 다운로드
<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>
React JS element 생성
HTML 코드를 직접 작헝하지 않을 것이고 React.js와 javascript를 이용해서 element를 사용할 것이다.
먼저 개발자들이 사용하지 않는 어려운 방법을 살펴볼 것이다
사람들은 쉬운 방법을 좋아하기 때문에 하지만 어려운 방법으로 React js의 본질을 이해해보자
React js는 어플리케이션이 아주 interactive하게 만들어주는 library이다
react-dom은 library, package인데
모든 React element 들이 HTML body에 둘 수 있게 해 준다.
React JS는 엔진 같은 역할
=> 암기하지 말고 이해해보려 해라
ReactDOM.render();render() 유저에게 보여주는 것
<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");
const span = React.createElement("span");
ReactDOM.render(span, root);
</script>
핵심은 ReactDOM.render() 함수로
생성 span 태그를 root에 하위 요소로 담겠다는 것이다.
createElement에서 속성들을 추가할 수 있다
<script>
const root = document.getElementById("root");
const span = React.createElement("span", { id: 'sexy-span', style: { color: 'red' } }, "Hello Span");
ReactDOM.render(span, root);
</script>
이 과정을 보면 기존에 html을 작성하고
그 html 요소들을 js에서 찾아서 변경했던 것과 다르게 애초에 처음부터
js에서 html 을 생성함으로써, html을 react js에서 제어할 수 있음을 보여준다.
즉 React js에서 HTML을 업데이트 하는 과정은
JAVASCRIPT에서 시작하고 HTML에서 끝나는 것
JAVASCRIPT를 통해서 HTML 생성
다음 시간에는 ID를 대체하는 방법을 알려줄 것이다.
마우스 이벤트를 넣는 방법을 살펴보았다.
<!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");
const span = React.createElement(
"span",
// { id: 'sexy-span', style: { color: 'red' } },
null,
"Hello Span");
const btn = React.createElement("button", {
onMouseEnter: () => { console.log("I'm clicked") }
}, "Click me!");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);
</script>
</html>
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
| #3.1 setState part One (0) | 2023.05.19 |
|---|---|
| #3.0 Understanding State (0) | 2023.05.19 |
| #2.6 JSX part Two (0) | 2023.05.18 |
| #2.5 JSX (0) | 2023.05.18 |
| #2.4 Recap (0) | 2023.05.18 |