2022. 9. 2. 12:57ㆍReact/ReactJS로 영화 웹 서비스 만들기
React JS element를 어떻게 생성하는지 배워보자.
이전에 vanilla.html처럼 만들었던 것을 이번에는 React를 이용해 만들어보자.
먼저, ReactJS의 규칙 중 하나는 HTML을 index.html에 직접 작성하지 않는다는 것이다.
대신 우리는 Javascript코드를 입력할 것이다.
Javascript와 React JS를 이용하여 element를 생성할 것이다.
그런데 다른사람들이 쓰지 않는 방식으로 어려운 방식을 사용해 보고 쉬운 방식을 연습해보자!
(React JS의 본질을 이해하기 위해)
1. React JS element를 만들어보자
<!DOCTYPE html>
<html lang="en">
<body>
</body>
<!-- https://ko.reactjs.org/docs/cdn-links.html -->
<!-- 개발용 -->
<!-- <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> -->
<!-- 배포용 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script>
// React JS로 element 생성하기
// createElement의 괄호안에는 우리가 생성하고자 하는 HTML태그와 동일해야 함
const span = React.createElement("span");
</script>
</html>
자 다음으로는 span을 페이지에 한번 두어보자~!
이제부터는 어떻게 body안에 React element를 가져다 둘 수 있는지 살펴보자.
그럼 React JS가 HTML을 생성할건데, 그렇게 하려면 React-dom을 사용해야한다.
React JS는 어플리케이션이 아주 interactive하도록 만드러주는 library이고
React-dom은 Library 또는 package인데 모든 React element들을 HTML body에 둘 수 있도록 해준다.
그래서
React JS는 엔진과 같다! - Interactive한 UI를 만들 수 있게 해준다!
React-dom은 React element를 HTML에 두는 역할을 한다.
아래의 CODE로 React-dom을 import했으니까 이제 사용해보자.
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- https://ko.reactjs.org/docs/cdn-links.html -->
<!-- 개발용 -->
<!-- <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> -->
<!-- 배포용 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
// React JS로 element 생성하기
// createElement의 괄호안에는 우리가 생성하고자 하는 HTML태그와 동일해야 함
const span = React.createElement("span");
// render는 React Element를 가지고 HTML로 만들어 배치한다(사용자에게보여줌)
// span인데 id가 root인 것 안에 있는 것
ReactDOM.render(span, root);
</script>
</html>
그럼 다음과 같이 div안에 span이 생긴것을 확인할 수 있다.
이 코드들로 element를 만들고, root안에 넣은 것이다.
<script>
const root = document.getElementById("root");
// React JS로 element 생성하기
// createElement의 괄호안에는 우리가 생성하고자 하는 HTML태그와 동일해야 함
const span = React.createElement("span");
// render는 React Element를 가지고 HTML로 만들어 배치한다(사용자에게보여줌)
// span인데 id가 root인 것 안에 있는 것
ReactDOM.render(span, root);
</script>createElement에는 더 작성할 수 있는 argument가 있는데, span의 property이다.
property의 예로는 className, id 등이있다.
그래서 아래와 같이 수정하면
const span = React.createElement("span", { id: "sexy-span" });
다음과 같이 element창에서 출력하는 것을 확인할 수 있다.
한줄로, 많은것을 낼 수 있는 것을 확인할 수 있다.
그럼 비어있는 span을 채워보자.
const span = React.createElement("span", { id: "sexy-span" }, "Hello I'm a span");
그런데 이렇게 한문장을 출력하기 위해서이와 같이 많은 과정을 거쳐서 하는게 과연 효율적일까? 아니다!
그냥 span을 쓰고 싶으면 HTML에 삽입하면되니까!
이번에는 이 복잡한 과정을 해보면서
React JS는 우리가 해왔던 방식을 거꾸로 하고있다는 것을 설명하였다.
바닐라 JS에서는 HTML을 먼저 만들고, 그걸 JavaScript로 가져와서 HTML을 수정하는 식이었는데
React JS는 JavaScript로 시작해서 다음으로 HTML가 되는 것이다.
JavaScript와 React JS를 사용하여 element를 생성할 때에는 React JS가 element를 생성하고있다.
이 말은, React JS는 업데이트가 필요한 element를 업데이트 할 것이라는 말이다.
바로, React JS가 결과물인 HTML을 업데이트 할 수 있다는 것이다.
React JS는 유저에게 보여질 내용을 컨트롤 할 수 있다는 뜻이다.
그래서 우리는 React JS에게 업데이트해야하는 HTML을 업데이트 하라고 할것이다.
JavaScript에서 시작하고 HTML에서 끝나도록!
JavaScript를 이용해 element를 생성했고 React JS가 그걸 HTML로 번역하는 것이다!
'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 3.0 Understanding State (0) | 2022.09.06 |
|---|---|
| 2.6 JSX part Two (0) | 2022.09.05 |
| 2.5 JSX (0) | 2022.09.05 |
| 2.3 Events in React (0) | 2022.09.02 |
| 2.1 Before React (0) | 2022.09.01 |