React와 Redux 만들기
- 개발자가 직접 DOM을 핸들링 하지 않게 함
- DOM이 없는 것처럼~
아주 흔한 컨셉(아이디어)
- 다루기 까다롭다면, 다루기 쉬운 포맷으로 변환해 다루기
- HTML(문자열) ⏩변환⏩ 객체
- 복잡한 DOM 객체 ⏩변환⏩ 더 간단한 객체!
객체 to DOM Render
<body>
<div id="root"></div>
</body>
function createDOM(node){
if(typeof node === "string") {
return document.createTextNode(node);
}
const element = document.createElement(node.tag);
node.children
.map(createDOM)
.forEach(element.appendChild.bind(element));
return element;
}
const vdom = {
tag: "p",
props: {},
children: [
{
tag: "h1",
props: {},
children: ["React 만들기"],
},
{
tag: "ul",
props: {},
children: [
{
tag: "li",
props: {},
children: ["1번째 아이템"]
},
{
tag: "li",
props: {},
children: ["2번째 아이템"]
},
{
tag: "li",
props: {},
children: ["3번째 아이템"]
},
]
}
],
};
document
.querySelector("#root")
.appendChild(createDOM(vdom));
Webpack과 Babel 세팅
npm i webpack-cli -D
npm i
webpack-dev-server
babel-loader
@babel/core
@babel/preset-env
@babel/preset-react
html-webpack-plugin
-D-
webpack.config.js (node 문법)
웹팩의 모듈과 플러그인
웹팩이 하는 일
entry(입력)의 JS를 받아 읽어들이고, 변환과정을 걸쳐 그 변환과정을 출력한다.
그 변환과정은? 웹팩이 하는 것이 아니라
웹팩에 끌어들인 다른 프로그램(plugin)이 처리 후,
웹팩은 그것들을 모아서 출력한다 ⏩ 번들링 프로세스
예시
- entry에 JS 파일을 지정함
- module에 파일을 변환하는 트랜스파일러 지정
- plugin에 변환된 파일을 변경하는 기능을 가진 소프트웨어를 지정
- 웹팩은 위의 순서대로 처리 후
최종적으로 output 파일로 쓴다.
const vdom = {
tag: "p",
props: {},
children: [
{
tag: "h1",
props: {},
children: ["React 만들기"],
},
{
tag: "ul",
props: {},
children: [
{
tag: "li",
props: {
style: "color:blue",
},
children: ["1번째 아이템"]
},
{
tag: "li",
props: {
style: "color:green",
},
children: ["2번째 아이템"]
},
{
tag: "li",
props: {
style: "color:red",
},
children: ["3번째 아이템"]
},
]
}
],
};
createElement
가변 인자 처리
import { createDOM, createElement, render } from "./react";
const vdom = createElement("p", {},
createElement("h1", {}, "React 만들기"),
createElement("ul", {},
createElement("li", { style: "color:blue" }, "1번째 아이템"),
createElement("li", { style: "color:green" }, "2번째 아이템"),
createElement("li", { style: "color:red" }, "3번째 아이템"),
)
);
console.log(vdom);
render(vdom, document.querySelector("#root"));
createElement 숨기기
HTML의 태그 형태로
@JSX
/* @jsx createElement */
import { createDOM, createElement, render } from "./react";
const vdom = <p>
<h1>React 만들기</h1>
<ul>
<li style="color:blue">1번째 아이템</li>
<li style="color:green">2번째 아이템</li>
<li style="color:red">3번째 아이템</li>
</ul>
</p>
console.log(vdom);
render(vdom, document.querySelector("#root"));
Babel · The compiler for next generation JavaScript
함수 컴포넌트
컴포넌트 : JSX로 만들어진 형태
사용자 컴포넌트
- 함수
- 클래스
✅ 대문자로 시작하는 것은 함수라고 약속함!
클래스 컴포넌트
거의 안씀..
Hook을 통해 함수 컴포넌트도 state를 가질 수 있게 되면서
함수 컴포넌트가 대세가 되었다
virtual DOM
메타데이터
UI 업데이트 될때 : render 메소드가 새로워 진다
비교를 통해 새로운 걸 반영
Hook
함수가 상태를 가질 수 있다.
- 반복문, 조건문, 중첩함수 내에서 호출할 수 없다.
- React 함수 내에서만 호출해야 한다.
- React는 Hook이 호출되는 순서에 의존한다
Redux
상태를 관리하는 라이브러리
[내일배움카드취업], [국비지원교육]
'[패스트캠퍼스] 프론트엔드 강의 정리' 카테고리의 다른 글
| [패스트캠퍼스] 프론트엔드 강의 #25 (0) | 2022.11.10 |
|---|---|
| [패스트캠퍼스] 프론트엔드 강의 #24 (0) | 2022.10.29 |
| [패스트캠퍼스] 프론트엔드 강의 #23 (0) | 2022.10.29 |
| [패스트캠퍼스] 프론트엔드 강의 #22 (0) | 2022.10.26 |
| [패스트캠퍼스] 프론트엔드 강의 #21 (1) | 2022.10.25 |