React
Facebook에서 2011년도에 만든 라이브러리 개념.
복잡한 UI문제를 해결하기 위해 만든 기술.(= 새로운 HTML 태그를 만드는 기술?)
기본 구조는 자바스크립트 문법을 기반으로 사용함.
기본 게임 캐릭터에서 장비/코디로 게임 캐릭터를 업그레이드 하는 느낌으로 알면 됨.
React의 좋은점
- 자동으로 UI 업데이트가 가능함
웹사이트에서 업데이트 된 부분이 있으면 새로고침을 해야 했는데 React는 자동으로 업데이트를 해줌
- 재활용을 많이 함.
코딩을 최대한 덜 하면서 웹사이트를 만들 수 없을 까 ??
코드의 재활용을 많이 함.
- 코드 정리가 편리함
HTML과 Javascript를 파일을 따로 따로 만들었는데 React는 HTML과 Javascript를 합친 JSX 문법으로 사용하여 정리가 편리함
Javascript 라이브러리 중 React가 가장 많이 쓰이고 유명해 배워두면 좋음
( 대표적인 자바스크립트 라이브러리 : React, Veu.js Angula)
React를 배워두면 나머지 Veu나 Angula를 배울때도 비슷하기 때문에 접근하기 쉬움.
React의 사용
# 코딩알려주는누나 님 영상 내용
index.html 내용
: React는 싱글 페이지 어플리케이션 SPA이라고 하며 웹페이지가 딱 하나 밖에 없음(.html 파일이 1개 존재)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="src/favicon.svg">
<meta name="viewport" content="width=divice-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div> <!-- 이 부분 중요 -->
<script type="module" src="src/main.jsx"></script>
</body>
</html>
main.jsx 내용
: index.html 파일과 App.jsx를 연결해주는 역할.
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root') // document에서 Id가 'root'인 Element에 App를 그려준다
)
App.jsx 내용
import React from 'react';
import './app.css';
function App() {
return (
<main>
React⚛ + Vite⚡ + Replit🌌
</main>
);
}
export default App;
학원에서 기초 실습할 때 사용하는 내용⇊
기초 연습용 페이지
HTML 페이지만 사용.
기본 구조⇊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- react 관련 스크립트를 가져옴 -->
<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 src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const element = <h1>Hello World</h1> // element의 내용
const root = document.getElementById('root');
// 첫번째 매개변수 :ㅣ 어떤 요소를 넣을 것인가?
// 두번째 매개변수 : 어디에 넣을 것인가?
ReactDOM.render(element,root) // element를 root에 넣어준다.
</script>
</body>
</html>
첫 날 사용한 사이트 자료
React CDN 링크
https://ko.reactjs.org/docs/cdn-links.html
CDN 링크 – React
A JavaScript library for building user interfaces
ko.reactjs.org
<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>:리액트 환경 구축
Babel cdnjs 링크
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
<script src=https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>: 최신버전의 자바스크립트를 브라우저 호환성에 맞춰 읽을 수 있도록 변환시켜줌.
'공부 > React' 카테고리의 다른 글
| React - json 서버 설치 (0) | 2021.12.28 |
|---|---|
| React Router 사용 (0) | 2021.12.28 |
| React day01-2 (0) | 2021.12.15 |
| React day01-01 (0) | 2021.12.14 |
댓글