[ReactJS] React로 영화 서비스 만들기 : 2.1. React의 설치와 기초

Import React

React CDN(다운로드 링크)을 html 파일에 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>

• React JS : App이 interactive하게 만들어주는 library
• React-DOM : 모든 React element들을 HTML body에 둘 수 있게 하는 library

React JS

조금 어려운 방식이고, 실제로는 이렇게 작업하지는 않겠지만, 기본 동작을 알기 위한 코드

React.createElement : Element 생성

const span = React.createElement("span");

span 태그 element를 만들고, 이를 span에 저장

element에 property 부여

// special-span id 부여
const span = React.createElement("span", { id: "special-span" });

// color: red; style 부여
const span = React.createElement("span", style: { color: "red" });

• 두 번째 argument에 중괄호를 넣고, property와 value 넣기
• django의 context와 비슷

element에 content 부여

const span = React.createElement("span", { id: "special-span" }, "Hello, I'm a span");

• 세 번째 argument에 string 형식으로 넣기

React-DOM

• 화면에 React element를 rendering 할 때 사용

ReactDOM.render() : React element HTML에 삽입

const root = document.getElementById("root");
const span = React.createElement("span");
ReactDOM.render(span, root);

• “#root element 내에 span element를 넣어 render하겠다!”
• React JS로 만든 react element를 HTML에 반영하겠다.

다중 삽입할 때 : array 사용

const root = document.getElementById("root");
const h3 = React.createElement("h3", null, "Hello, I'm a h3" );
const btn = React.createElement("button", null, "Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);

• “container div 안에 h3과 btn을 넣고 root 내에 render하겠다.”
• array에 element 삽입

JavaScript와 React

• Vanilla JS : HTML element 만들기 → JS에서 수정
• React JS : React element에서 다 만들기 → HTML에 반영
• element의 업데이트에 더 용이

Event in React

const btn = React.createElement("button", {
  onClick: () => console.log("I'm clicked"),
}, "Click me");

• btn element에 “click” eventListener를 add한 상황