React JS로 버튼 클릭 횟수를 알려주는 앱 만들기 (harder way)
* React JS 사용 시에는 HTML에 직접적으로 내용을 작성하지 않는다. 대신, Vanilla JS와 React JS를 이용하여 element를 생성한다.
* 이번 시간에 배우는 React JS로 element를 생성하는 방식은 실제로 잘 쓰지 않는 방식이다. (React JS를 이해하기 위한 방법으로, 어려운 방법이다.)
1. span 생성 (React로 Element 생성하기)
<script>
const span = React.createElement("span");
</script>- 변수명은 꼭 HTML tag명이 아니어도 된다. (원하는 변수명으로 설정 가능하다.)
- 윗줄에서 이미 React를 import했기 때문에 createElement function을 가진 React object에 접근 가능하다.
- createElement 함수의 인자는 우리가 생성하고자 하는 HTML 태그와 똑같은 이름이어야만 한다.
- 이 시점에서는 body가 비어있고 화면에도 아무것도 나타나지 않는다. but console창에 span을 입력하면 object 형태의 결과가 나오는 것으로 보아 span이 생성되었음을 알 수 있다.
* React JS와 React DOM
// 이것은 React JS로, interactive한 UI를 만들 수 있게 해 주는 엔진이다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
// 이것은 React-dom으로, React Element를 HTML에 두는 역할을 한다.
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>2. span을 페이지에 배치하기 (<body> 안에 Reacte Element 배치하기)
<body>
<div id="root"></div>
</body><script>
// span을 배치할 곳을 가져왔다. (root DOM node)
const root = document.getElementById("root");
// createElement로 span tag 생성
const span = React.createElement(
"span", // 첫번째 인자: HTML tag명
{ id: "sexy-span", style: { color: "red" } }, // 두번째 인자: span의 property들
"Hello, I'm a span."); // 3번째 인자: 생성할 태그의 content(children)들
// ReactDOM에게 span(React Element)을 root 안에 render해달라고 요청한다.
ReactDOM.render(span, root);
</script>- render의 의미는 React element를 HTML로 만들어 배치한다는 의미이다. 즉, 사용자에게 보여준다는 의미로 해석할 수 있다.
- 위 결과로 HTML의 <body> tag 안에 root DOM node가 생성되었고 그 안에 <span tag>가 생성된 것을 볼 수 있다.
- property로는 className이 될 수도, id가 될 수도, css style 등이 될 수도 있다.
📌Vanilla JS에서와 위에서의 React JS 코드 작성 차이점
Vanilla JS
HTML을 먼저 만들고, 그것을 JS로 가져와서 HTML을 수정하는 식이다.
React JS
모든 것이 JS로써 시작하고 그 후에 HTML이 된다.
React JS가 element를 생성한다는 말은 React JS가 필요한 element를 업데이트하여 HTML을 업데이트 할 수 있다는 말이다.
따라서 React JS는 유저에게 보여질 내용을 컨트롤할 수 있다.
오늘의 코드
<!--버튼을 몇 번 클릭했는지 세는 어플이다.-->
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!--아래 두 줄의 코드는 리액트를 실행시키는 코드이다. 작성하면 console창에 react라고 작성했을 때 결과를 불러올 수 있어야 한다.-->
<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>
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
'React study > React JS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| [React] 1-5. JSX로 카운터 앱 만들기 (2) (0) | 2023.05.23 |
|---|---|
| [React] 1-4. JSX를 이용해 카운터 앱 만들기 (1) (0) | 2023.05.23 |
| [React] 1-3. React.js로 카운터 앱 만들기 (2) (0) | 2023.05.23 |
| [React] 1-1. 바닐라 JS로 버튼 클릭 횟수를 알려주는 앱 만들기 (2) (0) | 2023.05.23 |
| [React] 1-0. ReactJS가 필요한 이유 (0) | 2023.05.23 |
댓글