DOM, Element
Documnet Object Model
-
문서를 논리 트리로 표현한다
-
바닐라 자바스크립트
특정 라이브러리나 프레임워크를 사용하지 않는 순수 자바스크립트 -
CDN
Content Delivery network
웹에서 제공하는 컨텐츠 리소스를 저장하여 제공하는 시스템
unpkg -
react
react는 element 생성
react-dom은 appendChild와 같은 역할
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = React.createElement("h1", {
className: "title",
children: ["Hello, world!!!!", "a", "b"]
});
ReactDOM.render(element, rootElement);
</script>
</body>
</html>- jsx
문자도 html도 아닌 javascript의 확장 문법
react에서 씀
const element = <h1>Hello, world!</h1>;- babel
jsx -> js compiler
jsx에서는 변수화 할 수 있다는 장점이 있음.
또한 jsx를 통해서 html과 js를 왔다갔다 하는 형식으로 사용할 수 있어짐.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const text = "Hello, world!";
const titleClassName = "title";
const element = <h1 className={titleClassName}>{text}</h1>;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>- spread 연산자
...
//const customH1 = <h1 {...props} />;
const customH1 = <h1 className={props.className} children={props.children} />- 멀티 element 생성
React.Fragment 사용 (생략가능)
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = (
<React.Fragment>
<h1>H1</h1>
<h3>bye</h3>
<h5>Children</h5>
<React.Fragment/>
);
console.log(element);
ReactDOM.render(element, rootElement);
</script>- element 찍어내기
Function은 재사용 가능한 element
Customo Element: jsx를 리턴하는 함수( feel like tag)
그래서 기존 html과 구분위해 uppercase 사용
children에는 제약이 없다(갯수, 부모 자식) 또 다른 element 넣기 가능
- js jsx
interpolation = 섞어서 사용이 가능하다
ex)
html내에서 css와 js를 섞어쓰듯
