📑 CDN
CDN (Contents Delievery Network) 이란?
- 지연을 최소화하면서 사용자에게 컨텐츠를 배포하는 데 도움이 되는 서버 및 해당 데이터 센터의 지리적으로 분산된 네트워크
CDN의 이점
- 웹사이트 페이지 로드 시간 개선
- 대역폭 비용 절감
- 컨텐츠 가용성 및 중복성 증가
- 웹사이트 보안 개선
📑 React CDN 사용
1. React CDN 링크 추가 (head에 넣기)
<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>2. babel CDN 링크 추가
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>- 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구
- JSX를 브라우저가 이해 할 수 있는 형태로 바꾸어 줌
3. JSX 문법으로 HTML태그 생성
- JSX (JS + XML)
- 컴포넌트 안에 들어가는 HTML 요소들을 JS안에서 실제 HTML의 모습과 동일하게 사용할 수 있도록 지원
- createElement 함수
- React 엘리먼트를 만들 수 있음
- 첫 번째 인수는 생성할 요소의 타입 (div, h1, button 등)
- 두 번째 인수는 요소의 속성 (className, style, onClick 등)
- 세 번째 인수는 요소의 자식 (다른 요소나 텍스트 포함)
<body>
<div id="root"></div>
<script type="text/babel">
let a = 0;
const h1 = React.createElement("h1", { id: "h1", style: { color: "blue" } }, JSX 문법 사용);
const button = React.createElement("button", { onClick: () => {a = a+1; console.log(a); } }, Click!);
const container = React.createElement("div", null, [h1, button]);
ReactDOM.render(container, document.getElementById("root"))
</script>
</body>- 함수형 컴포넌트
- function 으로 정의하고 return 문에 jsx 코드를 반환
- function을 사용하지 않고
화살표 함수로 정의해도 됨
<body>
<div id="root"></div>
<script type="text/babel">
const App = () => {
let a = 0;
return (
<div>
<h1 id='h1' style={{color:'blue'}}>
JSX 문법 사용
</h1>
<button onClick={() => {a = a+1; console.log(a);}}>
Click!
</button>
</div>
)
}
ReactDOM.render(container, document.getElementById("root"))
</script>
</body>- 클래스형 컴포넌트
- class로 정의하고 render() 함수에서 jsx 코드를 반환
import React, { Component } from "react";
class App extends Component {
render() {
const name = "react";
return <h1 className="h1">{name}</h1>;
}
}
export default App;