[React] React 라이브러리

DOM?

Document Object Model
element는 우리 눈에 보여지는 것이고, DOM은 브라우저가 이해하는 element의 원형이다.

2개의 핵심 모듈

=> ES6방식인 import를 사용할 수 있는 이유?
import를 이용한 구문들이 webpack이나 다른 bundler를 통해 변경 가능하기 때문이다.

// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from "react-dom";

// 2. 리액트 컴포넌트 만들기
import React from "react";

{React 컴포넌트} - JS, JSX -> <HTMLElement>
HelloMessage는 React 컴포넌트를 의미하며, render는 실제 DOM에 컴포넌트를 그리라는 뜻이다. ReactDOM.render를 마치 main(시작 함수)처럼 생각하면 된다.
만들어진 리액트 컴포넌트를 실제 HTMLElements에 연결할 때 ReactDOM 라이브러리를 이용한다.

ReactDOM.render(
  <HelloMessage name = "Yejin" />,
  document.getElementById("hello-example");
);

class HelloMessage extends React.Component {
  render(){
    return (
      <div>
        Hello {this.props.name}
      </div>
    )
  }
}

React Component 만드는 법

리액트 컴포넌트를 만들 때 사용하는 API 모음

• https://reactjs.org/docs/react-api.html
• https://ko.reactjs.org/docs/react-api.html

=> CDN?
Content Delivery Network
웹에서 사용되는 다양한 컨텐츠를 저장하여 제공하는 시스템

CDN 을 통한 리액트 라이브러리 사용

• https://reactjs.org/docs/cdn-links.html
• https://ko.reactjs.org/docs/cdn-links.html

=> develop버전의 CDN

<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>

=> production버전의 CDN

<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>

Class 컴포넌트

import React from "react"; // React.createElement를 사용하기 위해

// 정의
class ClassComponent extends React.Component {
  render() {
    return <div>Hello</div>;
  }
}
// 사용
<ClassComponent />;

Function 컴포넌트

import React from "react"; // React.createElement를 사용하기 위해

// 정의 1
function FunctionComponent() {
  return <div>Hello</div>
}
// 정의 2
const FunctionComponent = () => {
  return <div>Hello</div>;
};
const FunctionComponent = () =>  return <div>Hello </div>; // 괄호 생략 가능

// 사용
ReactDOM.render(<FunctionComponent />, document.querySelector("#root"));

간단한 프로그램 만들기

1. npm init -y
   npm 프로젝트로 만들기 위해서
2. npx serve
   파일 서버처럼 운영하기 위해서
3. index.html 파일 만들어줌
   실제 배포하는 건 아니니, develop버전의 CDN 복사해서 body에 넣어줌

Component를 함수로 인식하고 리액트의 Element로 반환해야됨

const Component = (props) => {
  return React.createElement("p", null, `${props.message} : ${props.count}`);
  // <p>${porps.message} : ${props.count}</p>
};

ReactDOM.render(
  React.createElement(Component, { message: "init", count: 0 }, null),
  // 컴포넌트를 보여줌, 컴포넌트에 props를 넣어줄 객체, 컴포넌트 사이에 넣을 값
  document.querySelector("#root")
);

const btn_plus = document.querySelector("#btn_plus");

btn_plus.addEventListener("click", () => {
  ReactDOM.render(
    React.createElement(Component, { message: "update", count: 10 }, null),
    document.querySelector("#root")
  );
});