[React] React 엘리먼트 생성하기 :: createElement()
반응형
🎯 React 엘리먼트 생성하기
- 각 JSX 엘리먼트는 단지 React.createElement()를 호출하는 편리한 문법에 불과하다.
- 즉, JSX는
React.createElement의Syntax Sugar이다.
- 즉, JSX는
- JSX를 사용할 경우 React.createElement()를 직접 호출하는 일은 거의 없다.
📝 React.createElement(component, props, ...children)
React.createElement(
type,
[props],
[...children]
)- type 인자로는 태그 이름 문자열
📝 JS로 작업
<body>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = document.createElement("h1");
element.textContent = "Hello";
rootElement.appendChild(element);
</script>
</body>
📝 리액트로 변환
const rootElement = document.getElementById("root");
const elemet = React.createElement("h1", { children: "Hello, World" })
ReactDOM.render(elemet, rootElement); // (주입할 대상, root) -> 자바스크립트로 따지면 append()
반응형
'프로그래밍 > React' 카테고리의 다른 글
| [React] Element 찍어내기 (0) | 2021.09.11 |
|---|---|
| [React] 멀티 Element 생성하기 :: React.Fragment (0) | 2021.09.11 |
| [React] JSX, Babel, 스프레드 연산자 (0) | 2021.09.11 |
| [React] ReactDOM.render (0) | 2021.09.11 |
| [React] 리액트 기본 설정하기 (0) | 2021.09.10 |