Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 원티트 프리온보딩인턴십 1주차
- react portal
- Redux
- 유령 의존성
- 향해99
- CloudFront 무효화
- 프로젝트
- NVM
- jsEvent Loop
- NextJs
- 원티드프리온보딩
- CPU와 GPU의 차이점
- 식별자란
- 광고지구
- 원티드인턴십
- 인풋태그 엔터
- 회고록
- Client-Side Navigation
- git
- react
- input error
- Mac OS NVM
- toast err
- next/link
- JavaScript
- JS
- 알고리즘
- Passed by Value
- Node
- Til
Archives
- Today
- Total
SUIN
[React] React DOM 다루기 (JSX 없이 element 그려보기) 본문
728x90
VanillaJS로 element 생성
<script>
const rootElement = document.getElementById("root");
const element = document.createElement("h1");
element.textContent = "VanillaJS";
rootElement.appendChild(element);
</script>
React로 element 생성
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children: "ReactJS" });
ReactDOM.render(element, rootElement);
</script>
두 element를 console로 확인해보자
React 새로운 객체를 만들어냈고 그 안에 props에 children 이 들어가 있는 걸 확인할 수 있다
* React에서는 props로 넘기지 않고 3번째 인자로 element를 생성할 수 있다
const elementReact = React.createElement("h1", null, "ReactJS");
콘솔을 확인해보면 객체로 넣어주지 않아도 동일하게 props에 children으로 보이는 걸 확인할 수 있다.
그럼 객체와 인자를 모두 적용하면 어떻게 될까?
<script type="text/babel">
const rootElement = document.getElementById("root");
const elementReact = React.createElement(
"h1",
{ ClassName: "title", children: "ReactJS!!!!" },
"ReactJS"
);
ReactDOM.render(elementReact, rootElement);
</script>
props에 children을 넣어도 3번째 인자값이 있으면 3번째 인자를 먼저 그린다
children은 여러개를 넣을 수 있다.
React : element 생성
ReactDOM : appendChild와 동일하게 render역할을 한다.
React creactElement 공식문서
https://ko.reactjs.org/docs/react-api.html#createelement
'React' 카테고리의 다른 글
[React] 멀티 element 생성해보기 (React.Fragment를 쓰는 이유 ) (0) | 2022.02.07 |
---|---|
[Raact] JSX 란 (0) | 2022.02.07 |
React element 랜더링 자세히 알아보기 (0) | 2022.02.07 |
[React] Vanilla JS 와 React의 랜더링, 리액트 리랜더링 장점 알아보기 (0) | 2022.02.04 |
[React] React Hook (0) | 2021.11.28 |