반응형
1. DOM?
Document Object Model의 약자이며, XML이나, HTML 문서에 접근하기 위한 인터페이스라고 보면 된다.
위와 같은 계층 구조로 나타나 있으며, 자바스크립트를 사용해서 문서의 요소를 변경, 수정, 삭제할 수 있다.
2. Element
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script>
const rootElemnet = document.getElementById("root");
const element = document.createElement("h1");
element.textContent = "Hello, world";
rootElemnet.appendChild(element)
</script>
</body>
</html>html 태그를 사용하지 않고, 자바스크립트로 직접 만들 수 있다.
이것을 React에서 어떤 방식으로 사용할까?
3. React에서의 Element 다루기
<!DOCTYPE html>
<html lang="en">
<body>
<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>
<div id="root"></div>
<script>
const rootElemnet = document.getElementById("root");
// const element = document.createElement("h1");
const element = React.createElement("h1", { children: "Hello, world" });
ReactDOM.render(element, rootElemnet);
// element.textContent = "Hello, world";
// rootElemnet.appendChild(element)
</script>
</body>
</html>보는 바와 같이 React에서도 Element를 생성, 수정을 할 수 있다.
반응형
'React > 패스트캠퍼스' 카테고리의 다른 글
| [React - 기초] Portals (2) | 2022.03.17 |
|---|---|
| [React - 기초] Memoization (2) | 2022.03.15 |
| [React - 기초] Hooks (0) | 2022.03.10 |
| [React - 기초] React와 리랜더링 (0) | 2022.03.09 |
| [React - 기초] JSX, Babel (0) | 2022.03.08 |