[React] React 라이브러리

📌 DOM

Document Object Model

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

DOM 소개 - Web API | MDN

 

📌 2개의 핵심 모듈

- ES6방식인 import를 사용할 수 있는 이유

import를 이용한 구문들이 webpack이나 다른 bundler를 통해 변경 가능하기 때문이다.

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

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

 

{React 컴포넌트} - JS, JSX => <HTMLElement>

HelloMessage는 React 컴포넌트를 의미하며, render는 실제 DOM에 컴포넌트를 그리라는 뜻이다.

ReactDOM.render를 마치 main(시작 함수)처럼 생각하면 된다.

만들어진 리액트 컴포넌트를 실제 HTMLElements에 연결할 때 ReactDOM 라이브러리를 이용한다.

 

 📌 React 컴포넌트 만드는 법

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

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

React 최상위 API – React

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

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

CDN 링크 – React

CDN (Content Delivery Network) 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템

 

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>

product 버전의 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")
  );
});