Dom
DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일을 구조화시켜 표현하여
프로그래밍언어(스크립트언어, ex: javascript)가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 인터페이스입니다.
음.. 짬뽕 생각하시면 편할거 같네요.
해산물 + 면 + 물 + 소스와 조미료 = 짬뽕HTML/CSS(해산물) + JAVASCRIPT(면) + DOM(물) + 조미료와 소스(Web Worker, Web Cache, Cookie, Storage, etc..) = Web BrowserHTML/CSS(해산물) <-> DOM(물) <-> JAVASCRIPT(면)
React
React는 Dom의 상태를 관리하는 JAVASCRIPT 라이브러리입니다.
(복잡하게 가자면 실제 Dom을 직접 관리하기엔 느리기에 Virtual Dom이라는 가상의 Dom을 생성하여 Dom을 캐싱하고
변경사항만 실제 Dom에 업데이트(동기화)하는 방식입니다.)
그림을 같이 보시면 아마 이해가 빠르실 겁니다.
1. Virtual Dom에서 주황색 원에 State변화가 일어남
2. State변화가 일어난 원과 그 하위트리를 탐색함
3. 실제 Dom에 반영
https://ko.reactjs.org/docs/faq-internals.html
Virtual DOM과 Internals – React
A JavaScript library for building user interfaces
ko.reactjs.org
https://ko.reactjs.org/docs/reconciliation.html
재조정 (Reconciliation) – React
A JavaScript library for building user interfaces
ko.reactjs.org
React로 프로젝트를 시작하는 방법(with CRA)
그러면 보통 React프로젝트는 어떻게 시작해봐야되나 고민하시는 분들이 많으실 텐데요.
두가지 방법정도가 있을것 같습니다.
1. 필요한 라이브러리를 한땀한땀 정성스럽게 받아서 시작한다.
https://www.npmjs.com/package/react
https://www.npmjs.com/package/react-dom
https://www.npmjs.com/package/vite
https://www.npmjs.com/package/webpack
https://www.npmjs.com/package/@babel/core
.
.
.
등등..
2. 만들어진 스크립트를 돌린다.
npx create-react-app test-appyarn create vite test-app --template react
보통 CRA(create-react-app)로 프로젝트를 구성하시게 되면 이런 구조가 보이실텐데요.
음.. 뭐부터 설명해야 되지..
// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
// 밑에 소스코드에서 React Tree가 들어가는 부분입니다
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// index.html에 있는 id가 root인 원소를 찾아 React Tree를 생성합니다.
// 음.. 맨 위의 그림의 맨 위에 있는 공을 생각하시면 됩니다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// StrictMode는 Strict한 규칙을 씌운건데 loose한걸 좋아하시면 빼셔도 됩니다만.. 보통은 권장사항입니다
// https://react.dev/reference/react/StrictMode
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();// App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
HTML vs React
HTML은 단순한 마크업 언어입니다.
HTML과 React를 비교해보자면 다음과 같이 되겠네요.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let count = 0;
function writeCount() {
const countEl = document.getElementById('count');
if (!countEl) {
return;
}
document.getElementById('count').innerHTML = `${count}`;
}
function increaseCount() {
count++;
writeCount()
}
function decreaseCount() {
count--;
writeCount();
}
window.onload = function() {
writeCount();
}
</script>
</head>
<body>
<button onclick="increaseCount()">
Increase(증가)
</button>
<div id="count">
0
</div>
<button onclick="decreaseCount()">
Decrease(감소)
</button>
</body>
</html>
React
import React, {useState} from 'react';
import ReactDOM from 'react-dom/client';
function App() {
const [count, setCount] = useState(0);
return (
<body>
<button onClick={() => setCount(prevState => prevState + 1)}>
Increase(증가)
</button>
<div>
{count}
</div>
<button onClick={() => setCount(prevState => prevState - 1)}>
Decrease(감소)
</button>
</body>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
이렇게 단순히 증가버튼, 숫자, 감소버튼를 만들어보았는데요.
단순하게 보시면 어라(?) React의 코드가 훨씬 짧네.. 그렇다면 HTML과 비교했을때 무조건 React를 써야 하는것이 아닌가하는 의문이 드실수는 있습니다. 그렇지만 React로 작성한 코드를 브라우저에서 읽기 위해서는 추가적으로 많은 라이브러리가 필요합니다ㅋㅋ...
그냥 React 너무 좋으니까 무조건 활용하세요
심플한 페이지를 만드는데는 React보다 심플한 HTML, CSS, JS만을 활용하셔서 구성하는게 빠를수 있습니다.
그러나 복잡한 페이지를 구성할수록 React나 다른 Vue, Svelte등등 라이브러리를 사용하시는것이 훨씬 효율적일수 있습니다.
제 생각엔 상황에 따라 다르게 활용하시는게 훨씬 좋습니다.
다음엔 React의 Hook활용으로 찾아뵙겠습니다.
긴글 봐주셔서 감사합니다
'Dev > Web' 카테고리의 다른 글
| [React] Store Library - Redux (0) | 2023.08.22 |
|---|---|
| [React] Hook의 이해-2 (useMemo, useCallback, useRef) (0) | 2023.04.26 |
| [React] Hook의 이해-1 (useState, useEffect) (2) | 2023.04.18 |